vue.js实现翻转

Vue.js 实现翻转效果

在 Vue.js 中实现翻转效果可以通过 CSS 过渡或动画结合 Vue 的动态绑定特性完成。以下是几种常见方法：

使用 CSS Transition 和 Vue 数据绑定

通过 v-bind:class 或 v-bind:style 动态切换类名或样式，触发 CSS 过渡效果：

<template>
  <div 
    class="flip-container"
    @click="isFlipped = !isFlipped"
  >
    <div class="flipper" :class="{ 'flipped': isFlipped }">
      <div class="front">正面内容</div>
      <div class="back">背面内容</div>
    </div>
  </div>
</template>

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

<style>
.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}
.flipped {
  transform: rotateY(180deg);
}
</style>

使用 CSS Animation

通过 Vue 触发 CSS 动画关键帧：

<template>
  <div 
    class="flip-box"
    @click="flip"
    :class="{ 'animate-flip': isAnimating }"
  >
    <div v-show="!isFlipped">正面</div>
    <div v-show="isFlipped">背面</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false,
      isAnimating: false
    }
  },
  methods: {
    flip() {
      this.isAnimating = true;
      setTimeout(() => {
        this.isFlipped = !this.isFlipped;
        this.isAnimating = false;
      }, 600);
    }
  }
}
</script>

<style>
.flip-box {
  width: 200px;
  height: 200px;
  position: relative;
}
.animate-flip {
  animation: flip 0.6s;
}
@keyframes flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}
</style>

使用第三方库（如 Vue Flip）

对于更复杂的需求，可以使用专门库如 vue-flip：

1. 安装依赖：

   npm install vue-flip

2. 实现代码：

   
   <template>
   <flip>
    <div v-if="isFlipped" key="back">背面内容</div>
    <div v-else key="front">正面内容</div>
   </flip>
   <button @click="isFlipped = !isFlipped">翻转</button>
   </template>

import Flip from 'vue-flip' export default { components: { Flip }, data() { return { isFlipped: false } } } ```

注意事项

• 3D 变换需设置 perspective 和 transform-style: preserve-3d 才能生效
• 背面元素需要初始设置 rotateY(180deg) 并配合 backface-visibility: hidden
• 动画性能优化建议启用硬件加速（添加 transform: translateZ(0)）