vue实现书本翻页效果
时间: 2023-08-15 08:09:08 浏览: 71
你可以使用Vue.js来实现书本翻页效果。下面是一个简单的示例:
HTML模板:
```html
<div id="app">
<div class="book" :class="{'open': isOpen}">
<div class="page front">
<h1>Front Cover</h1>
</div>
<div class="page back">
<h1>Back Cover</h1>
</div>
<div class="page content" :class="{'flip': isFlipping}">
<h1>Content</h1>
</div>
</div>
<button @click="flipPage">Flip Page</button>
</div>
```
CSS样式:
```css
.book {
width: 300px;
height: 400px;
perspective: 1000px;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f2f2f2;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.5s ease;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}
.content {
transform-origin: left center;
}
.open .content {
transform: rotateY(-180deg);
}
.flip {
animation: flipAnimation 0.5s forwards;
}
@keyframes flipAnimation {
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
```
Vue实例:
```javascript
new Vue({
el: '#app',
data: {
isOpen: false,
isFlipping: false
},
methods: {
flipPage() {
this.isFlipping = true;
setTimeout(() => {
this.isOpen = !this.isOpen;
this.isFlipping = false;
}, 500);
}
}
});
```
这个示例中,使用了CSS 3D转换和Vue的数据绑定来实现翻页效果。点击"Flip Page"按钮时,通过改变Vue实例中的isOpen和isFlipping属性来触发CSS动画和翻页效果。
注意:以上代码只是一个简单的示例,你可以根据自己的需求进行扩展和定制。