<style>
#box{
width:100px;
height:100px;
background-color: red
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="show">
<!-- 在transition标签中使用js动画 需要使用enter事件和leave事件，分别表示入场动画事件和离场动画事件 -->
<transition
@enter="aniEnter"
@leave="aniLeave"
>
<div id="box" v-show="show"></div>
</transition>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
show:false
},
methods:{
// 动画事件绑定的函数有两个参数 分别是做动画的元素对象和动画结束时的回调函数。
aniEnter(el,cb){
// console.log(arguments)
el.style.opacity=0;
let opa=0
function next(){
requestAnimationFrame(function(){
opa+=0.01;
el.style.opacity=opa;
if(opa>=1){
cb();
}
else{
next()
}
})
}
next()
},
aniLeave(el,cb){
// console.log("leave事件")
// 在动画事件绑定的函数中使用js代码执行动画，并在动画结束时调用cb回调函数。
let opa=1;
function next(){
requestAnimationFrame(function(){
opa-=0.01;
el.style.opacity=opa;
if(opa<=0){
cb();
el.style.opacity=1;
}
else{
next()
}
})
}
next()
}
}
})
</script>
</body>