当前位置：首页 > VUE

vue实现点击旋转

2026-01-18 22:23:31VUE

实现点击旋转效果的方法

在Vue中实现点击旋转效果可以通过CSS动画和Vue的数据绑定结合完成。以下是几种常见的实现方式：

使用CSS transition实现

定义一个旋转的CSS类，通过Vue的v-bind:class或v-bind:style动态切换：

vue实现点击旋转

<template>
  <div 
    class="rotate-element"
    :class="{ 'rotate': isRotated }"
    @click="isRotated = !isRotated"
  >
    点击我旋转
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRotated: false
    }
  }
}
</script>

<style>
.rotate-element {
  transition: transform 0.5s ease;
  display: inline-block;
}

.rotate {
  transform: rotate(180deg);
}
</style>

使用CSS animation实现

通过动态添加动画类实现旋转：

vue实现点击旋转

<template>
  <div 
    class="rotate-element"
    :class="{ 'rotate-animation': isRotating }"
    @click="toggleRotate"
  >
    点击我旋转
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRotating: false
    }
  },
  methods: {
    toggleRotate() {
      this.isRotating = !this.isRotating
    }
  }
}
</script>

<style>
.rotate-element {
  display: inline-block;
}

.rotate-animation {
  animation: rotate 1s linear;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

动态计算旋转角度

通过数据绑定动态计算旋转角度：

<template>
  <div 
    class="rotate-element"
    :style="{ transform: `rotate(${rotation}deg)` }"
    @click="rotate"
  >
    点击我旋转
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotation: 0
    }
  },
  methods: {
    rotate() {
      this.rotation += 90
    }
  }
}
</script>

<style>
.rotate-element {
  transition: transform 0.3s ease;
  display: inline-block;
}
</style>

使用Vue过渡效果

利用Vue的<transition>组件实现旋转过渡：

<template>
  <div>
    <transition name="rotate">
      <div 
        v-if="show"
        class="rotate-element"
        @click="toggle"
      >
        点击我旋转
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

<style>
.rotate-element {
  display: inline-block;
}

.rotate-enter-active, .rotate-leave-active {
  transition: transform 0.5s;
}

.rotate-enter, .rotate-leave-to {
  transform: rotate(180deg);
}
</style>