vue.js 实现翻转

Vue.js 实现翻转效果

在 Vue.js 中实现翻转效果可以通过 CSS 动画或 JavaScript 动画库来实现。以下是几种常见的方法：

使用 CSS 过渡和变换

可以通过 Vue 的过渡系统结合 CSS 的 transform 属性来实现翻转效果。

<template>
  <div>
    <button @click="flip = !flip">Toggle Flip</button>
    <transition name="flip">
      <div v-if="flip" class="flip-card">
        Front Content
      </div>
      <div v-else class="flip-card back">
        Back Content
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flip: true
    };
  }
};
</script>

<style>
.flip-card {
  width: 200px;
  height: 200px;
  background: #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  position: absolute;
}

.flip-card.back {
  background: #ff7e67;
  transform: rotateY(180deg);
}

.flip-enter-active, .flip-leave-active {
  transition: transform 0.8s;
}

.flip-enter, .flip-leave-to {
  transform: rotateY(180deg);
}

.flip-enter-to, .flip-leave {
  transform: rotateY(0deg);
}
</style>

使用 Vue Transition 组件

Vue 的 <transition> 组件可以更方便地管理进入和离开的动画。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="flip">
      <div v-if="show" class="flip-box">
        Content to flip
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.flip-box {
  width: 200px;
  height: 200px;
  background: #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-enter-active {
  animation: flip-in 0.5s;
}

.flip-leave-active {
  animation: flip-out 0.5s;
}

@keyframes flip-in {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flip-out {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}
</style>

使用第三方库（如 GSAP）

对于更复杂的翻转动画，可以使用 GSAP 这样的动画库。

<template>
  <div>
    <button @click="toggleFlip">Toggle Flip</button>
    <div ref="flipElement" class="flip-box">
      {{ isFlipped ? "Back" : "Front" }}
    </div>
  </div>
</template>

<script>
import { gsap } from "gsap";

export default {
  data() {
    return {
      isFlipped: false
    };
  },
  methods: {
    toggleFlip() {
      this.isFlipped = !this.isFlipped;
      gsap.to(this.$refs.flipElement, {
        duration: 0.5,
        rotationY: this.isFlipped ? 180 : 0
      });
    }
  }
};
</script>

<style>
.flip-box {
  width: 200px;
  height: 200px;
  background: #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
</style>

实现 3D 翻转卡片

如果需要实现类似扑克牌的 3D 翻转效果，可以使用以下方法：

<template>
  <div class="flip-container">
    <div class="flipper" :class="{ flipped: isFlipped }">
      <div class="front">
        Front Side
      </div>
      <div class="back">
        Back Side
      </div>
    </div>
    <button @click="isFlipped = !isFlipped">Flip Card</button>
  </div>
</template>

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

<style>
.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flipper.flipped {
  transform: rotateY(180deg);
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  background: #42b983;
  z-index: 2;
}

.back {
  background: #ff7e67;
  transform: rotateY(180deg);
}
</style>

这些方法可以根据具体需求选择使用，CSS 过渡适合简单效果，而 GSAP 等库适合更复杂的动画场景。