Vue過渡mode屬性踩坑
阿新 • • 發佈：2018-12-09
近期學習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