[TOC] #### 1.css過渡動作實例講解 <div id="hdcms"> <button @click="type=!type">切換</button> <transition name="hd"> <h1 v-if="type">houdunren.com后盾人</h1> </transition> </div> <script> new Vue({ el: '#hdcms', data:{ type:false } }); </script> <style> .hd-enter,.hd-leave-to{ opacity: 0; } .hd-enter-to{ } .hd-enter-active{ transition: all 5s; color:red; } .hd-leave-active{ transition: all .5s; color:green; } </style> #### 2.使用animate.css動畫庫控制vuejs過渡動畫 引入animate.css https://daneden.github.io/animate.css/ <div id="hdcms"> <button @click="type=!type">切換</button> <transition enter-active-class="animated slideInDown" leave-active-class="animated zoomOut"> <h1 v-if="type">houdunren.com后盾人</h1> </transition> </div> <script> new Vue({ el: '#hdcms', data:{ type:false } }); </script> #### 3.使用animation與transform實現vue的動畫效果 <div id="hdcms"> <button @click="type=!type">切換</button> <transition name="hd"> <h1 v-if="type">houdunren.com后盾人</h1> </transition> </div> <script> new Vue({ el: '#hdcms', data:{ type:false } }); </script> <style> .hd-enter-active{ animation: show-in 1s; transition: all 1s; } .hd-leave-active{ animation: hide-out 1s; transition: all 1s; } .hd-enter,.hd-leave-to{ opacity: 0; } @keyframes show-in { 0%{ transform: translate(200px,0); } 100%{ transform: translate(0,0); } } @keyframes hide-out { 0%{ transform: translate(0,0); } 100%{ transform: translate(200px,0); } } </style>