vue实现翻书效果
Vue实现翻书效果的方法
使用CSS 3D变换和动画
在Vue中结合CSS的3D变换和过渡效果，可以模拟翻书动画。通过动态绑定class或style，控制页面的翻转状态。
<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>
<script>
export default {
data() {
return {
isFlipped: false
};
},
methods: {
flipPage() {
this.isFlipped = !this.isFlipped;
}
}
};
</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是一个专门用于实现翻书效果的JavaScript库，可以轻松集成到Vue项目中。
安装Turn.js：
npm install turn.js在Vue组件中使用：
<template>
<div id="flipbook">
<div class="hard">Cover</div>
<div class="hard">Back Cover</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: black;
}
</style>结合Vue过渡系统
利用Vue的过渡系统（<transition>和<transition-group>）可以创建更复杂的翻页动画。
<template>
<transition name="flip" mode="out-in">
<div :key="currentPage" class="page">
{{ pageContent }}
</div>
</transition>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pages: {
1: "Page 1 Content",
2: "Page 2 Content"
}
};
},
computed: {
pageContent() {
return this.pages[this.currentPage];
}
},
methods: {
nextPage() {
this.currentPage = Math.min(this.currentPage + 1, 2);
},
prevPage() {
this.currentPage = Math.max(this.currentPage - 1, 1);
}
}
};
</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;
}
</style>注意事项
- 性能优化：3D变换可能消耗较多资源，尤其在移动设备上。必要时减少动画复杂度或添加
will-change: transform提示浏览器优化。 - 兼容性：CSS 3D特性在旧浏览器中支持有限，需测试目标环境。
- 交互设计：考虑添加手势支持（如hammer.js）实现滑动翻页。
