Vue過渡mode屬性踩坑


近期學習Vue的過渡效果的時候,mode屬性的"in-out"、"out-in"設置了不起作用,官網上的例子讓我看了有點迷,問題解決后以此文記錄之。

 

首先我們看一下vue中文文檔的說法

根據這樣的描述我寫出了如下代碼demo

<style type="text/css">
    .on-enter-active,.off-enter-active{
      transition: 2s ease;
    }
    .on-leave-active,.off-leave-active{
      transition: 3s ease;
    }
    .on-enter,.on-leave-to,.off-enter,.off-leave-to{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="test">
  <transition name="on" mode="out-in">
    <button v-if="show">on</button>
  </transition>
   <transition name="off" mode="out-in">
    <button v-if="!show">off</button>
  </transition>
  <button style="margin-top: 100px;" @click="show=!show">切換</button>
</div>

<script src="vue.js"></script>
<script>
  new Vue({
    el:'#test',
    data:{
      show:true
    }
  })
</script>

但是這樣的寫法,當我點擊切換按鈕的時候發現根本不起作用,就算設置了mode屬性但是on和off的過渡依舊是同時開始的,也就是並沒有起作用

在研究了半天后,結合文檔前面的多元素的過渡終於解決了問題。

先給出mode屬性起作用的代碼

<style type="text/css">
    .on-enter-active{
      transition: 2s ease;
    }
    .on-leave-active{
      transition: 3s ease;
    }
    .on-enter,.on-leave-to{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="test">
  <transition name="on" mode="out-in"><!--mode只適用於一個transition內的同標簽切換-->
    <button v-if="show" key="but1">on</button>
    <button v-else key="but2">off</button><!--key為了防止只是修改內容不重新渲染-->
  </transition>

  <button style="margin-top: 100px;" @click="show=!show">切換</button>
</div>

<script src="vue.js"></script>
<script>
  new Vue({
    el:'#test',
    data:{
      show:true
    }
  })
</script>

原來文檔中的過渡模式是建立在多組件切換的基礎上的,也就是動態組件切換,並且當兩個被切換的元素是同種標簽的內容時(比如這里都是button),需要給每個元素加key用以區分元素。

否則由於Vue機制的原因,為了性能會使用同一個元素。也就是說你切換時並不會更換掉整個元素,而是替換掉該元素中的內容的值,以此來切換,所以在這里需要添加key


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM