快捷導(dǎo)航

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

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

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

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

建議：先學(xué)習(xí)vue官方文檔的進(jìn)入/離開 & 列表過渡章節(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">點(diǎn)擊</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)過渡怎么變成了延遲,仔細(xì)閱讀官方文檔找不同,連連看;

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

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

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

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

來! 上正確的代碼

<!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">點(diǎn)擊</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>

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

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

您可能感興趣的文章: