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