本文實例為大家分享了vue實現循環切換動畫的具體代碼，供大家參考，具體內容如下
注意動畫的鉤子函數的判斷邏輯，注意動畫編寫時類名的順序！！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style> .box{ width: 200px; height: 200px; background-color: red; } .guo-enter-active,.guo-leave-active{ width: 200px; height: 200px; opacity: 1; background-color: red; transition: 0.7s; } .guo-leave-to{ width: 100px; height: 100px; opacity: 0; background-color: orange; } .guo-enter{ width: 100px; height: 100px; opacity: 0; background-color: orange; } .box2{ margin-top: 100px; } </style> <script src='vue.min.js'></script></head><body> <div id='app'> <div> <input type="button" value='change' @click='change'> <transition name='guo' @after-enter='Enter' @after-leave='Leave'> <div v-show='show' class='box'></div> </transition> <transition name='guo' @enter='Enter2' @after-leave='Leave2'> <div v-show='show2' class='box box2'></div> </transition> </div> </div> <script> new Vue({ el:'#app', data:{ show:false, show2:false }, methods:{ change(){ this.show = !this.show; }, Enter(){ this.show2 = true; }, Leave(){ this.show2=false; }, Leave2(){ this.show = true; }, Enter2(){ this.show = false; } } }); </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
