Vue中的JS动画与velocity.js
2018-04-17 本文已影响0人
daoqing99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的JS动画与velocity.js</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.js"></script>
</head>
<style>
div {
font-size: 20px;
width: 300px;
margin: 200px auto;
text-align: center;
}
</style>
<body>
<div id="app">
<transition name='fade' @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<!-- enter换成leave就是离开动画 -->
<div v-if='show'>hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBeforeEnter: function(el) {
el.style.opacity=0;
},
handleEnter: function(el, done) {
// setTimeout(() => {
// el.style.color = 'green';
// }, 2000);
// setTimeout(done, 4000)
// done回调函数执行后触发@after-enter事件
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
})
},
handleAfterEnter: function(el) {
// el.style.color = "#000";
}
}
})
</script>
</body>
</html>
