vue实现仿真翻页

Vue 实现仿真翻页效果

实现仿真翻页效果可以通过 CSS 3D 变换和 Vue 的过渡动画结合完成。以下是具体实现方法：

基础 HTML 结构

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

Vue 组件脚本

<script>
export default {
  data() {
    return {
      isFlipped: false
    }
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped
    }
  }
}
</script>

CSS 样式

<style scoped>
.page-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
}

.page {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
}

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

进阶实现方法

多页翻页效果

<template>
  <div class="book">
    <div 
      class="page" 
      v-for="(page, index) in pages" 
      :key="index"
      :style="{ 'z-index': pages.length - index }"
      @click="flipPage(index)"
    >
      <div class="front">{{ page.front }}</div>
      <div class="back">{{ page.back }}</div>
    </div>
  </div>
</template>

添加阴影效果

.page {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 1s, box-shadow 1s;
}

.page.flipped {
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
}

使用 GSAP 增强动画

import gsap from 'gsap'

methods: {
  flipPage(index) {
    gsap.to(this.$refs.pages[index], {
      duration: 1,
      rotationY: 180,
      ease: "power2.inOut"
    })
  }
}

注意事项

• 确保父容器设置了 perspective 属性以获得 3D 效果
• backface-visibility: hidden 可以隐藏背面内容
• 使用 transform-style: preserve-3d 保持 3D 变换层次
• 对于复杂场景，考虑使用现成的翻页库如 turn.js

通过组合这些技术，可以创建出逼真的翻页效果，并根据需要调整动画时间和缓动函数以获得最佳视觉效果。