解決vue的過渡動畫無法正常實現(xiàn)問題

前記：最近在寫vue的一個項目要實現(xiàn)過渡的效果，雖然vue動畫不是強項，庫也多,但是基本的坑還是得踩扎實;

創(chuàng)新互聯(lián)公司專注于七星網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供七星營銷型網(wǎng)站建設(shè)，七星網(wǎng)站制作、七星網(wǎng)頁設(shè)計、七星網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù)，打造七星網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供七星網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

建議：先學習vue官方文檔的進入/離開 & 列表過渡章節(jié)，那么我們來看bug;

首先上出現(xiàn)問題的代碼

  
  




  

   點擊
   
     
你好
   
  
  

以上代碼看起起來真的沒有什么問題,但是復(fù)制粘貼發(fā)現(xiàn)過渡怎么變成了延遲,仔細閱讀官方文檔找不同,連連看;

我們要過度的屬性是opacity，相對于官方文檔我們在要過渡的div里多加了一個opacitry的屬性值為1,這就導(dǎo)致其實整個動畫過程中opacitry的值都為1而不會出現(xiàn)動畫中由1到0的過渡；

導(dǎo)致這個問題的根本原因是因為css優(yōu)先級的問題，div的css優(yōu)先級遠大于動畫中css屬性的優(yōu)先級，所以opacity的值始終都是div中的值并不發(fā)生過渡變化；

那么解決的辦法其一當然是去掉在div中的opacitry的值，從而使得只存在動畫中的opacitry從而實現(xiàn)動畫；

但是當div中的屬性需要存在我們又需要過渡動畫的時候，我們需要!important這尊大神去改變css的優(yōu)先級;!important是使當前css的優(yōu)先級達到最高當然important就是優(yōu)先級最低;

來! 上正確的代碼

  
  




  

   點擊
   
     
你好
   
  
  

這樣就既可以實現(xiàn)過渡效果也不拆去div中優(yōu)先級較高的css屬性

以上這篇解決vue的過渡動畫無法正常實現(xiàn)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。