vue中css動畫transition
阿新 • • 發佈：2018-11-21
動畫第一幀：v-enter v-leave
動畫最後一幀： v-enter-to v-leave-to
動畫屬性時間等過程：v-enter-active v-leave-active
如果沒有寫第一幀或最後一幀，那麼預設是動畫開始前的值，動畫結束後的值
v-leave無效的原因？？？
<style> .fade-leave-active { transition: font-size 5s; } .fade-leave-to { font-size: 50px } .fade-enter { font-size: 40px; } .fade-enter-active { transition: font-size 3s; } .fade-enter-to { font-size: 20px } </style> </head> <body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade"> <div v-if="show" class="de">sfsf</div> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body>
該方法動畫結束後，還是會回到程式碼設定的狀態。就是拋開動畫效果，程式碼設定的什麼樣子，結果就是什麼樣子。
特點：用transition name來包裹一個顯示/隱藏的標籤