当前位置：首页 > VUE

vue怎么实现页面翻转

2026-01-21 21:22:04VUE

Vue 实现页面翻转效果

页面翻转效果通常用于创建类似书籍翻页的交互体验。以下是几种常见的实现方法：

使用 CSS 3D 变换

通过 CSS 的 transform 属性和过渡效果可以实现基础的翻转动画。

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

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

<style>
.flip-container {
  perspective: 1000px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}
.flipped {
  transform: rotateY(180deg);
}
</style>

使用第三方库

Vue-flip-page 是一个专门为 Vue 设计的翻页组件库，提供更丰富的效果。

安装：

npm install vue-flip-page

使用示例：

<template>
  <vue-flip-page>
    <template v-slot:front>
      <!-- 正面内容 -->
    </template>
    <template v-slot:back>
      <!-- 背面内容 -->
    </template>
  </vue-flip-page>
</template>

<script>
import VueFlipPage from 'vue-flip-page'
export default {
  components: {
    VueFlipPage
  }
}
</script>

实现多页面翻页效果

对于需要连续翻页的场景，可以结合 Vue 的动态组件和过渡效果：

<template>
  <transition name="flip" mode="out-in">
    <component :is="currentComponent" @next="handleNext" />
  </transition>
</template>

<script>
export default {
  data() {
    return {
      components: ['Page1', 'Page2', 'Page3'],
      currentIndex: 0
    }
  },
  computed: {
    currentComponent() {
      return this.components[this.currentIndex]
    }
  },
  methods: {
    handleNext() {
      this.currentIndex = (this.currentIndex + 1) % this.components.length
    }
  }
}
</script>

<style>
.flip-enter-active {
  animation: flip-in 0.5s;
}
.flip-leave-active {
  animation: flip-out 0.5s;
}
@keyframes flip-in {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0deg); }
}
@keyframes flip-out {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-90deg); }
}
</style>