vue实现仿真翻页

Vue 实现仿真翻页效果

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

基础 HTML 结构

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

Vue 组件逻辑

<script>
export default {
  data() {
    return {
      isFlipped: false,
      currentPage: 1
    }
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped;
      if (this.isFlipped) {
        setTimeout(() => {
          this.currentPage++;
          this.isFlipped = false;
        }, 500);
      }
    }
  }
}
</script>

CSS 样式

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

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

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

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

高级翻页效果

要实现更真实的翻页效果，可以添加弯曲变形：

.page {
  transform-origin: left center;
}

.page.flipped {
  transform: rotateY(-180deg) scaleX(0.8);
  box-shadow: -10px 0 20px rgba(0,0,0,0.2);
}

多页书籍实现

对于多页书籍，可以使用数组管理页面内容：

data() {
  return {
    pages: ['封面', '第一页', '第二页', '第三页'],
    currentIndex: 0,
    isFlipping: false
  }
},
methods: {
  flipForward() {
    if (this.isFlipping || this.currentIndex >= this.pages.length - 1) return;
    this.isFlipping = true;
    setTimeout(() => {
      this.currentIndex++;
      this.isFlipping = false;
    }, 500);
  },
  flipBackward() {
    if (this.isFlipping || this.currentIndex <= 0) return;
    this.isFlipping = true;
    setTimeout(() => {
      this.currentIndex--;
      this.isFlipping = false;
    }, 500);
  }
}

性能优化建议

使用 will-change 属性提升动画性能：

.page {
  will-change: transform;
}

考虑使用 Vue 的 <transition> 组件处理更复杂的动画序列。对于移动端，可以添加触摸事件支持实现手势翻页。