vue实现仿真翻书
Vue 实现仿真翻书效果
实现仿真翻书效果可以通过 CSS 3D 变换和 JavaScript 动画结合完成。以下是几种常见方法：
使用 CSS 3D 变换和 Vue 过渡
通过 Vue 的过渡系统结合 CSS 实现翻页动画：
<template>
<div class="book">
<div
class="page"
:class="{ 'flipped': isFlipped }"
@click="isFlipped = !isFlipped"
>
<div class="front">Front Content</div>
<div class="back">Back Content</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isFlipped: false
}
}
}
</script>
<style>
.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;
}
.back {
transform: rotateY(180deg);
}
</style>使用第三方库（如 turn.js）
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>
</template>
<script>
import 'turn.js'
export default {
mounted() {
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
}
}
</script>使用 GSAP 实现更复杂动画
GSAP 提供强大的动画控制能力，适合需要自定义翻书曲线的场景：
<template>
<div class="book" @click="flipPage">
<div class="page" ref="page">
<div class="front">Front</div>
<div class="back">Back</div>
</div>
</div>
</template>
<script>
import { gsap } from 'gsap'
export default {
methods: {
flipPage() {
gsap.to(this.$refs.page, {
duration: 1,
rotateY: 180,
transformOrigin: "left center"
})
}
}
}
</script>实现注意事项
性能优化
- 使用
will-change: transform提升动画性能 - 避免过多页面同时存在 DOM 中，可考虑虚拟滚动
移动端适配
- 添加触摸事件支持
- 调整翻页灵敏度阈值
进阶效果
- 添加页面弯曲效果（通过多重 div 和渐变阴影实现）
- 实现页面角落折叠效果
- 添加翻页音效
以上方法可根据具体需求选择，CSS 方案适合简单场景，turn.js 提供开箱即用功能，GSAP 则允许完全自定义动画曲线。实际项目中往往需要结合多种技术实现最佳效果。
