多元素動畫過渡 · vue

參考官方： https://cn.vuejs.org/v2/guide/transitions.html 動畫幾種方式： ``` <transition name="fade" mode="out-in" @before-enter="beforeEnter" @after-leave="afterLeave"> <p v-if="isShow" key="1">hello vue</p> <p v-else key="2">hello vue </p> </transition> ``` ~~~ !doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> </head> <body> <div id="app"> <button type="button" @click="isShow=!isShow">點擊</button> <transition name="fade" mode="out-in" @before-enter="beforeEnter" @after-leave="afterLeave"> <p v-if="isShow" key="1">hello vue</p> <p v-else key="2">hello vue </p> </transition> </div> </body> </html> <script src="vue/vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ isShow:true }, methods:{ beforeEnter:function(){ consloe.log('beforeEnter') }, afterLeave:function (){ console.log('afterLeave'); } } }); </script> ~~~