近期学习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