Vue動畫--兩個元素過渡
阿新 • • 發佈：2018-11-08
code：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中兩個元素過渡</title> <script type="text/javascript" src="js/vue.js" ></script> <style> .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active,.fade-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="root"> <!-- mode設定元素切換時的效果--> <transition name="fade" mode="out-in"> <!-- 新增key值，阻止vue對元素進行復用--> <div v-if="show" key="hello">hello world</div> <div v-else key="bye">Bye world</div> </transition> <button @click="handleClick">切換</button> </div> <script> new Vue({ el:"#root", data:{ show:true }, methods:{ handleClick(){ this.show=!this.show } } }) </script> </body> </html>