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

更新時間：2019年10月31日 18:38:47 作者：makerbeen

今天小編就為大家分享一篇解決vue的過渡動畫無法正常實現(xiàn)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

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

<!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>

以上代碼看起起來真的沒有什么問題,但是復(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)先級最低;

來! 上正確的代碼

<!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>

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

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

您可能感興趣的文章: