当前位置：首页 > VUE

vue实现翻页动画效果

2026-02-21 12:15:57VUE

Vue 实现翻页动画效果的方法

使用 Vue Transition 组件结合 CSS 动画

在 Vue 中可以通过内置的 <transition> 或 <transition-group> 组件实现翻页动画效果。以下是一个基础的实现示例：

<template>
  <div>
    <button @click="goToPrevPage">上一页</button>
    <button @click="goToNextPage">下一页</button>

    <transition :name="transitionName" mode="out-in">
      <div :key="currentPage" class="page">
        当前页码: {{ currentPage }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      transitionName: 'slide'
    }
  },
  methods: {
    goToNextPage() {
      this.transitionName = 'slide-next'
      this.currentPage++
    },
    goToPrevPage() {
      this.transitionName = 'slide-prev'
      this.currentPage--
    }
  }
}
</script>

<style>
/* 下一页动画 */
.slide-next-enter-active, .slide-next-leave-active,
.slide-prev-enter-active, .slide-prev-leave-active {
  transition: all 0.5s ease;
}
.slide-next-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-next-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-prev-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-prev-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.page {
  position: absolute;
  width: 100%;
  padding: 20px;
  background: #f5f5f5;
}
</style>

使用第三方库实现更复杂效果

对于更复杂的翻页效果，可以考虑使用以下库：

vue-page-transition：专为 Vue 设计的页面过渡库

npm install vue-page-transition

使用示例：

<template>
  <vue-page-transition name="fade-in-right">
    <router-view/>
  </vue-page-transition>
</template>

<script>
import { VuePageTransition } from 'vue-page-transition'

export default {
  components: {
    VuePageTransition
  }
}
</script>

GSAP：强大的动画库，可以实现各种自定义翻页效果

<template>
  <div>
    <div ref="page" class="page">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    animatePage(direction) {
      const tl = gsap.timeline()
      if (direction === 'next') {
        tl.to(this.$refs.page, { x: -100, opacity: 0, duration: 0.3 })
          .set(this.$refs.page, { x: 100 })
          .to(this.$refs.page, { x: 0, opacity: 1, duration: 0.3 })
      } else {
        // 上一页动画
      }
    }
  }
}
</script>

实现书本翻页效果

如需实现类似书本翻页的3D效果，可以使用 CSS 3D 变换：

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

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

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

然后在 Vue 组件中使用：

<transition name="flip" mode="out-in">
  <div :key="currentPage">
    <!-- 页面内容 -->
  </div>
</transition>

注意事项

vue实现翻页动画效果

使用 mode="out-in" 确保当前页面动画完成后再开始新页面动画
为动画元素设置 position: absolute 或 position: fixed 避免布局问题
考虑添加 z-index 控制层叠顺序
对于性能优化，尽量使用 transform 和 opacity 属性做动画

标签: 翻页效果

分享给朋友：

vue实现效果

Vue 实现常见效果的方法数据绑定与响应式更新 Vue 的核心特性是数据绑定，通过 v-model 实现表单元素与数据的双向绑定。例如输入框与数据的实时同步： <input v-model=…

vue实现滑动翻页

Vue 实现滑动翻页的方法使用 touch 事件监听在 Vue 组件中监听 touchstart、touchmove 和 touchend 事件，通过计算滑动距离判断翻页方向。 <temp…

vue实现弹窗效果

使用 Vue 实现弹窗效果组件化弹窗实现创建独立的弹窗组件 Modal.vue，通过 v-if 或 v-show 控制显示状态： <template> <div class…

vue 实现拖动效果

使用 Vue 实现拖动效果 Vue 提供了多种方式实现拖动效果，可以通过原生 HTML5 的拖放 API，也可以使用第三方库如 vuedraggable。以下是两种常见的方法：使用 HTML5 拖…

vue实现回弹效果

Vue 实现回弹效果的方法回弹效果（Bounce Effect）常见于移动端交互，可以通过 CSS 动画或 JavaScript 实现。以下是几种在 Vue 中实现回弹效果的方案：使用 CSS…

vue实现移动效果

使用 CSS 过渡实现移动效果在 Vue 中，可以通过 v-bind:class 或 v-bind:style 结合 CSS 过渡实现移动效果。定义一个 CSS 类，包含 transition 属性…

vue实现翻页动画效果