<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- vue对于transtion包裹起来的标签, 提供了对应的动画事件, 供我们使用js的方式编写动画 -->
<transition v-on:before-leave="bLeave" v-on:leave="leave" v-on:after-leave="aLeave">
<p v-if="isShow">白毛浮绿水</p>
</transition>
<button @click="change">显示隐藏</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true,
left: 0
},
methods: {
change: function() {
this.isShow = !this.isShow;
},
// 动画前做的事情在这里写, 可以在这里定义元素的初始样式
bLeave(el) {
console.log(el);
el.style.marginLeft = 0;
},
// 动画过程在这里编写, 该函数除了可以接收到元素外, 还有一个done方法, 用于告诉vue什么时候动画结束的
// 注意事项: 必须在动画结束时, 手动调用done方法, 不然元素就不会消失
// 注意事项2: 有些时候我们修改元素的style视图不会马上更新, 解决方案是把一些需要计算的数据定义在data里,
// 修改data里的数据, 会让vue强制更新视图
leave(el, done) {
console.log(el);
var timer = setInterval(() => {
this.left += 10;
el.style.marginLeft = `${this.left}px`;
if(this.left >= 200) {
clearInterval(timer);
done();
}
}, 300);
},
// 动画结束时, 如果元素样式需要重置, 那么可以再这里重置
aLeave(el) {
console.log(el);
// 如果要实现多次效果，可以在结束之后将上面的left清0
this.left = 0;
}
}
});
</script>
</body>
</html>
网友评论