当前位置：首页 > VUE

vue实现翻页动画

2026-02-19 00:38:38VUE

Vue 实现翻页动画

在 Vue 中实现翻页动画可以通过 CSS 过渡（Transition）或动画（Animation）结合 Vue 的动态组件或条件渲染来实现。以下是几种常见的实现方法：

使用 Vue Transition 组件

Vue 提供了 <transition> 和 <transition-group> 组件，可以方便地实现页面切换的动画效果。以下是一个简单的翻页动画示例：

<template>
  <div>
    <button @click="togglePage">切换页面</button>
    <transition name="page-flip" mode="out-in">
      <div :key="currentPage">
        <div v-if="currentPage === 'page1'">这是第一页</div>
        <div v-else>这是第二页</div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 'page1'
    }
  },
  methods: {
    togglePage() {
      this.currentPage = this.currentPage === 'page1' ? 'page2' : 'page1'
    }
  }
}
</script>

<style>
.page-flip-enter-active, .page-flip-leave-active {
  transition: all 0.5s ease;
}
.page-flip-enter {
  transform: rotateY(90deg);
  opacity: 0;
}
.page-flip-leave-to {
  transform: rotateY(-90deg);
  opacity: 0;
}
</style>

使用 CSS 动画

可以通过 CSS 的 @keyframes 定义更复杂的翻页动画效果：

vue实现翻页动画

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

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

.page-flip-enter-active {
  animation: flip-in 0.5s ease;
}
.page-flip-leave-active {
  animation: flip-out 0.5s ease;
}

使用第三方库

如果需要更复杂的翻页效果，可以考虑使用第三方库如 vue-page-transition：

安装库：
```
npm install vue-page-transition
```

在 Vue 项目中使用：

import VuePageTransition from 'vue-page-transition'
Vue.use(VuePageTransition)

在模板中使用：

<template>
<vue-page-transition name="flip">
 <router-view/>
</vue-page-transition>
</template>

实现 3D 翻页效果

如果需要更真实的 3D 翻页效果，可以结合 CSS 3D 变换：

.flip-container {
  perspective: 1000px;
}
.flip-page {
  transform-style: preserve-3d;
  transition: transform 1s;
}
.flip-page.flipped {
  transform: rotateY(180deg);
}

通过以上方法，可以在 Vue 中实现各种翻页动画效果，从简单的淡入淡出到复杂的 3D 翻转效果。根据项目需求选择合适的实现方式。