通过触发事件,改变data中的值,或者改变点击标签元素上的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./node_modules/vue/dist/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>