You need to set the animation part of the label with the transition wrapped up. You can add the name attribute. Vue is automatically added to the label class name at some point in time.
No name value, css default prefix name is "v"
Hidden to show
Began to fade-enter, fade-enter-active, (not movable frame 0) - 1 fade-enter the first frame is removed, the new v-enter-to, period for the last fade-enter-to, fade-enter-active removed.
Show to hide
Began to fade-leave, fade-leave-active-- frame 1 fade-leave is removed, the new fade-leave-to, z final cycle fade-leave-to, fade-leave-active remove
<style> .v-enter,.v-leave-to{ opacity:0; } .v-enter-active,.v-leave-active{ transition:opacity 3s; } </style> </head> <body> <div id="root"> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm=new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script> </body>