vue实现仿真翻页

Vue实现仿真翻页效果

实现仿真翻页效果通常需要结合CSS 3D变换和动画，以下是一个完整的实现方案：

基础HTML结构

<template>
  <div class="flip-book">
    <div class="page" :class="{ 'flipped': isFlipped }" @click="flipPage">
      <div class="front">
        <!-- 正面内容 -->
        <h2>Front Content</h2>
      </div>
      <div class="back">
        <!-- 背面内容 -->
        <h2>Back Content</h2>
      </div>
    </div>
  </div>
</template>

Vue组件脚本

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

CSS样式

<style scoped>
.flip-book {
  perspective: 1000px;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

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

.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: #f9f9f9;
}
</style>

高级实现（多页翻页）

对于更真实的书本翻页效果，可以扩展为多页系统：

data() {
  return {
    pages: [
      { id: 1, content: 'Page 1', flipped: false },
      { id: 2, content: 'Page 2', flipped: false }
    ],
    currentPage: 0
  }
},
methods: {
  flipNext() {
    if (this.currentPage < this.pages.length - 1) {
      this.pages[this.currentPage].flipped = true
      this.currentPage++
    }
  },
  flipPrev() {
    if (this.currentPage > 0) {
      this.currentPage--
      this.pages[this.currentPage].flipped = false
    }
  }
}

3D阴影增强效果

添加阴影可以增强真实感：

.page {
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.page.flipped {
  box-shadow: -10px 0 20px rgba(0,0,0,0.2);
}

触摸设备支持

添加触摸事件支持：

<div class="page" 
     @click="flipPage"
     @touchstart="startTouch"
     @touchmove="moveTouch"
     @touchend="endTouch">
</div>

性能优化

对于复杂场景，考虑使用CSS硬件加速：

.page {
  will-change: transform;
}

以上实现可以根据实际需求调整动画时间、翻页方向（水平/垂直）和视觉效果。更复杂的效果可能需要使用专门的库如turn.js或flip.js，但纯Vue实现可以提供更好的定制性和性能控制。