Vue动画之二： JS方式
2018-09-04 本文已影响0人
婷诗漾
在vue 项目中， 通过JS添加动画效果。
1、js 事件， 处理
<head>
<meta charset="UTF-8">
<title>vue 中的JS 动画 和 Velocity.js 的结合</title>
<script src = "vue.js"></script>
<script src = "velocity.min.js"></script>
<!--
before-enter
enter
after-enter
before-leave
leave
after-leave
setTimeout(() => {})
第一个括号之间必须没有空格
-->
</head>
<body>
<div id = "myApp">
<transition name = "fade"
@before-enter = "handleBeforeEnter"
@enter = "handleEnter"
@after-enter = "handleAfterEnter"
>
<h2 v-show = "show">Welcome to Home! Christine. </h2>
</transition>
<button @click = "handleClick">toggle</button>
</div>
<script>
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
},
handleBeforeEnter : function (el) {
el.style.color = "red"
},
handleEnter : function ( el , done ) {
setTimeout(() => {
el.style.color = "green"
}, 2000)
setTimeout(() => {
done()
}, 5000)
},
handleAfterEnter : function (el) {
el.style.color = "#000"
}
}
})
</script>
</body>
2、Velocity.js 实现的
<head>
<meta charset="UTF-8">
<title>vue 中的JS 动画 和 Velocity.js 的结合</title>
<script src = "vue.js"></script>
<script src = "velocity.min.js"></script>
</head>
<body>
<div id = "myApp">
<transition name = "fade"
@before-enter = "handleBeforeEnter"
@enter = "handleEnter"
@after-enter = "handleAfterEnter"
>
<h2 v-show = "show">Welcome to Home! Christine. </h2>
</transition>
<button @click = "handleClick">toggle</button>
</div>
<script>
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
},
handleBeforeEnter : function (el) {
el.style.opacity = 0
},
handleEnter : function ( el , done ) {
Velocity(el , {
opacity : 1
}, {
duration : 1000,
complete : done
})
},
handleAfterEnter : function (el) {
console.log("动画结束")
}
}
})
</script>
</body>
