(Process display: in an instant movie about to be executed, will go on to add two div class name: fade-enter, fade-enter-active and then remove the fade-enter, increase fade-enter-to then continue the animation. to the moment the end of the last two class will be removed.)
(Hidden process)
Why style tag of class to fade at the beginning of it? Because my name is in transition fade. If the name is not, the default is V (e.g.: v-enter, v-enter-active):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style type="text/css">
.fade-enter {
opacity: 0
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0
}
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
//name随便取名:
<transition name="fade">
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
</script>
</body>
</html>