vue2实现翻书

Vue2 实现翻书效果

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

基本结构

在 Vue 单文件组件中，构建翻书效果的基本 HTML 结构：

<template>
  <div class="book">
    <div class="page" :class="{ 'flipped': isFlipped }" @click="flipPage">
      <div class="front">Front Content</div>
      <div class="back">Back Content</div>
    </div>
  </div>
</template>

数据与交互

在 Vue 实例中定义控制翻页的状态和方法：

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

样式与动画

使用 CSS 实现 3D 翻页效果：

<style scoped>
.book {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.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;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

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

多页翻书效果

对于多页翻书效果，可以使用 Vue 的动态组件和过渡：

动态页面结构

<template>
  <div class="book-container">
    <button @click="prevPage">Previous</button>
    <transition name="flip" mode="out-in">
      <div :key="currentPage" class="page">
        {{ pages[currentPage] }}
      </div>
    </transition>
    <button @click="nextPage">Next</button>
  </div>
</template>

翻页逻辑

<script>
export default {
  data() {
    return {
      currentPage: 0,
      pages: [
        'Page 1 Content',
        'Page 2 Content',
        'Page 3 Content'
      ]
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.pages.length - 1) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--
      }
    }
  }
}
</script>

过渡动画

<style>
.flip-enter-active, .flip-leave-active {
  transition: all 0.5s;
}
.flip-enter {
  transform: rotateY(90deg);
  opacity: 0;
}
.flip-leave-to {
  transform: rotateY(-90deg);
  opacity: 0;
}

.page {
  width: 200px;
  height: 300px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
}
</style>

高级翻书效果

对于更真实的翻书效果，可以使用第三方库如 turn.js 或 pageflip：

使用 turn.js

1. 安装依赖：

   npm install turn.js

2. 在 Vue 组件中使用：

   
   <template>
   <div id="flipbook">
    <div class="hard"> Cover </div>
    <div class="hard"> Page 1 </div>
    <div class="hard"> Page 2 </div>
    <div class="hard"> Back Cover </div>
   </div>
   </template>

import 'turn.js' export default { mounted() { $('#flipbook').turn({ width: 800, height: 600, autoCenter: true }) } } ```

1. 添加样式：

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

以上方案提供了从简单到复杂的翻书效果实现，可根据项目需求选择合适的方案。