<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script/vue.js"></script>
</head>
<body>
<div id="app">
<!--js关于入场动画的钩子 @before-enter代表事件被触的时候;@enter代表运行动画的时候;@after-enter结束的时候
当为出场的时候从显示到隐藏的时候吧enter改为leave就可以-->
<transition
@before-enter="handbeforeEnter"
@enter="enter"
@after-enter="handafterEnter">
<div v-if="show">hello world{{a}}</div>
</transition>
<button @click="click">动画切换</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
show:true,
a:"曾庆霄"
},
//他们定义的事件都传递el运行动画的那个DIV,和@enter事件中的done参数他是个回调函数运行后代表动画运行结束
methods:{
click:function(){
this.show = !this.show;
},
handbeforeEnter:function(el){
el.style.color='red'
},
enter:function(el,done){
el.style.color='#000000';
done();
},
handafterEnter:function(el){
el.style.color='red'
}
}
})
</script>
</body>
</html>vue.js使用js动画
猜你喜欢
转载自blog.csdn.net/qq_39148344/article/details/84259574
今日推荐
周排行