< div id= "app" >
<fade :visible="visible">
<div>16</div>
</fade>
<button @click="handleClick"></button>
</div>
<script>
Vue.component("fade",{
props:["visible"],
template:`
<transition
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave"
>
<slot v-if="visible"></slot>
</transition>
`,
methods:{
beforeEnter(el){
el.style.opacity=0
},
enter(el,done){
el.offsetWidth;
el.style.opacity=1;
el.style.transition="opacity 2s ease .1s";
done()
},
beforeLeave(el){
el.style.opacity=1;
},
leave(el,done){
el.offsetWidth;
el.style.opacity=0;
el.style.transition="opacity 3s ease .1s";
done()
}
}
})
var vm = new Vue({
el:"-sharpapp",
data:{
visible:false,
},
methods:{
handleClick(){
this.visible=!this.visible
}
}
})
</script>want to write a click button div to achieve the transition to show and hide the effect. Use the hook function of vue"s animation, but why doesn"t the animation take effect?