当前位置：首页 > VUE

vue实现翻动的书

2026-02-22 11:41:14VUE

Vue 实现翻动的书效果

在 Vue 中实现翻动的书效果，可以通过 CSS 动画和 Vue 的动态绑定来实现。以下是两种常见的方法：

使用 CSS 动画和 Vue 动态绑定

HTML 结构 在 Vue 模板中，创建一个包含书页的容器，并使用 v-for 动态渲染书页。

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

CSS 样式 使用 CSS 定义书页的样式和翻转动画。

vue实现翻动的书

.book {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  position: relative;
}

.page {
  width: 100%;
  height: 100%;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  transform-style: preserve-3d;
  transition: transform 1s;
}

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

Vue 数据和方法 在 Vue 组件中定义书页数据和控制翻转的方法。

<script>
export default {
  data() {
    return {
      pages: [
        { content: 'Page 1', flipped: false },
        { content: 'Page 2', flipped: false },
        { content: 'Page 3', flipped: false }
      ]
    }
  },
  methods: {
    flipPage(index) {
      this.pages[index].flipped = !this.pages[index].flipped;
    }
  }
}
</script>

使用第三方库（如 Turn.js）

安装 Turn.js 通过 npm 安装 Turn.js 或直接在 HTML 中引入。
```
npm install turn.js
```

Vue 组件中使用 Turn.js 在 Vue 组件中初始化 Turn.js 翻书效果。

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

<script>
import 'turn.js'

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

CSS 样式 确保为 Turn.js 提供必要的样式支持。

#flipbook {
  width: 400px;
  height: 300px;
}

#flipbook .page {
  background: white;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}