vue实现翻动的书

实现翻动的书效果

在Vue中实现翻动的书效果，可以使用CSS 3D变换和动画。以下是一个完整的实现方案：

基本HTML结构

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

Vue组件脚本

<script>
export default {
  data() {
    return {
      pages: [
        { content: 'Page 1 Content' },
        { content: 'Page 2 Content' },
        { content: 'Page 3 Content' }
      ],
      currentPage: 0,
      isFlipping: false
    }
  },
  methods: {
    flipPage() {
      if (this.isFlipping || this.currentPage >= this.pages.length) return;

      this.isFlipping = true;
      const page = document.querySelectorAll('.page')[this.currentPage];
      page.style.transform = 'rotateY(-180deg)';

      setTimeout(() => {
        this.currentPage++;
        this.isFlipping = false;
      }, 1000);
    }
  }
}
</script>

CSS样式

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

.book {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.front-cover, .back-cover, .page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  transform-origin: left center;
  transition: transform 1s ease;
}

.page {
  background: #f9f9f9;
}

.page-content {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.front-cover {
  background: #4a6fa5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>

高级实现方案

对于更复杂的效果，可以使用第三方库如turn.js：

安装turn.js：

npm install turn.js

Vue组件实现：

<template>
  <div id="flipbook">
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
    <div class="page">Page 4</div>
  </div>
</template>

<script>
import 'turn.js'
export default {
  mounted() {
    $('#flipbook').turn({
      width: 800,
      height: 600,
      autoCenter: true
    });
  }
}
</script>

<style>
#flipbook {
  width: 800px;
  height: 600px;
}
#flipbook .page {
  background: white;
  color: #333;
  padding: 20px;
}
</style>

注意事项

确保在CSS中设置了正确的perspective值以获得真实的3D效果。调整过渡时间和缓动函数可以改变翻页的动画效果。对于移动设备，可能需要添加触摸事件处理。

性能优化方面，尽量减少同时存在的页面DOM数量，可以在翻页后移除已翻过的页面。使用will-change CSS属性可以提高动画性能：

.page {
  will-change: transform;
}