vue中CSS动画原理 · VUE

## 过度 ``` <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; //transition是css3中的过度效果,这里指定opacity 过度效果时间为0.5秒钟 } .fade-enter, .fade-leave-to { opacity: 0; //opacity 是css3中的透明效果,这里指定为0, } </style> </head> <body> <div id="app"> //动画必须要用transition标签包裹起来 <transition name="fade"> //如果这里不命名的话,样式里的fade替换成v就可以了 <div v-if="show">hello</div> </transition> <input type="button" value="点击" @click="show = !show"> </div> <script> var vm = new Vue({ el: '#app', data: { show: true, }, }); </script> ```