vue实现仿真翻页
Vue 实现仿真翻页效果
实现仿真翻页效果可以通过 CSS 3D 变换和 Vue 的过渡动画结合完成。以下是具体实现方法：
基础 HTML 结构
<template>
<div class="page-container">
<div class="page" :class="{ 'flipped': isFlipped }" @click="flipPage">
<div class="front">正面内容</div>
<div class="back">背面内容</div>
</div>
</div>
</template>Vue 组件脚本
<script>
export default {
data() {
return {
isFlipped: false
}
},
methods: {
flipPage() {
this.isFlipped = !this.isFlipped
}
}
}
</script>CSS 样式
<style scoped>
.page-container {
perspective: 1000px;
width: 300px;
height: 400px;
}
.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;
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
}
.back {
transform: rotateY(180deg);
background-color: #f5f5f5;
}
</style>进阶实现方法
多页翻页效果
<template>
<div class="book">
<div
class="page"
v-for="(page, index) in pages"
:key="index"
:style="{ 'z-index': pages.length - index }"
@click="flipPage(index)"
>
<div class="front">{{ page.front }}</div>
<div class="back">{{ page.back }}</div>
</div>
</div>
</template>添加阴影效果
.page {
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transition: transform 1s, box-shadow 1s;
}
.page.flipped {
box-shadow: -5px 0 15px rgba(0,0,0,0.3);
}使用 GSAP 增强动画
import gsap from 'gsap'
methods: {
flipPage(index) {
gsap.to(this.$refs.pages[index], {
duration: 1,
rotationY: 180,
ease: "power2.inOut"
})
}
}注意事项
- 确保父容器设置了
perspective属性以获得 3D 效果 backface-visibility: hidden可以隐藏背面内容- 使用
transform-style: preserve-3d保持 3D 变换层次 - 对于复杂场景，考虑使用现成的翻页库如 turn.js
通过组合这些技术，可以创建出逼真的翻页效果，并根据需要调整动画时间和缓动函数以获得最佳视觉效果。
