generally speaking, when vue animation is executed by adding class styles to elements, if the execution time is very short, you can not clearly see the class styles currently added to the elements, and whether there is a method in the chrome debugging tool that can see the classes added to the current elements.
whether the Animation tool provided by chrome can see the current class.
purpose: when introducing a third-party UI, modify its own animation.
<!---->
<div id="example-1">
<button @click="show =!show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello
</transition>
</div>
data () {
return {
show: true
}
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}