vue的過渡動畫無法正常實現
阿新 • • 發佈：2019-01-01
前記：最近在寫vue的一個專案要實現過渡的效果，雖然vue動畫不是強項，庫也多,但是基本的坑還是得踩紮實;
建議:先學習vue官方文件的進入/離開 & 列表過渡章節,那麼我們來看bug;
首先上出現問題的程式碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transition: opacity .5s; } .haha-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } #demo{ position: relative; width: 200px; height: 200px; margin: auto; top: 100px; } .bug{ position: relative; opacity: 1; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="demo"> <button v-on:click="show = !show">點選</button> <transition name="haha"> <div class="bug" v-if="show">你好</div> </transition> </div> <script type="text/javascript"> new Vue({ el: '#demo', data: { show: true } }) </script> </body> </html>
以上程式碼看起起來真的沒有什麼問題,但是複製貼上發現過渡怎麼變成了延遲,仔細閱讀官方文件找不同,連連看;
我們要過度的屬性是opacity，相對於官方文件我們在要過渡的div裡多加了一個opacitry的屬性值為1,這就導致其實整個動畫過程中opacitry的值都為1而不會出現動畫中由1到0的過渡；
導致這個問題的根本原因是因為css優先順序的問題，div的css優先順序遠大於動畫中css屬性的優先順序，所以opacity的值始終都是div中的值並不發生過渡變化；
那麼解決的辦法其一當然是去掉在div中的opacitry的值，從而使得只存在動畫中的opacitry從而實現動畫；
但是當div中的屬性需要存在我們又需要過渡動畫的時候，我們需要!important這尊大神去改變css的優先順序;!important是使當前css的優先順序達到最高當然important就是優先順序最低;
來!上正確的程式碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transition: opacity .5s; } .haha-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } #demo{ position: relative; width: 200px; height: 200px; margin: auto; top: 100px; } .bug{ position: relative; opacity: 1 important; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="demo"> <button v-on:click="show = !show">點選</button> <transition name="haha"> <div class="bug" v-if="show">你好</div> </transition> </div> <script type="text/javascript"> new Vue({ el: '#demo', data: { show: true } }) </script> </body> </html>
這樣就既可以實現過渡效果也不拆去div中優先順序較高的css屬性;