Vue第十二天（動畫）
阿新 • • 發佈：2018-12-21
準備步驟如同第一天
程式碼：（測試注意事項：js中的程式碼依次開啟測試，不可全部開啟，會報錯）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/vue-resource/dist/vue-resource.js"></script> <script src="../node_modules/vue-router/dist/vue-router.js"></script> </head> <!--過渡--> <!--<style> /*可以設定不同的進入和離開動畫*/ /*設定持續時間和動畫函式*/ .fade-enter-active, .fade-leave-active { transition: opacity 2s; } .fade-enter, .fade-leave { /*不透明級別*/ opacity: 0; } </style>--> <!--CSS過渡--> <!--<style> /* 可以設定不同的進入和離開動畫 */ /* 設定持續時間和動畫函式 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to { transform: translateX(10px); opacity: 0; } </style>--> <!--CSS動畫--> <style> .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> <body> <!--v-enter：定義進入過渡的開始狀態--> <!--v-enter-active：定義進入過渡生效時的狀態--> <!--v-leave: 定義離開過渡的開始狀態--> <!--v-leave-active：定義離開過渡生效時的狀態--> <!--過渡--> <div id="app1"> <button v-on:click="show=!show">測試按鈕</button> <transition name="fade"> <p v-show="show" v-bind:style="ceshi">測試一下</p> </transition> </div> <br> <!--CSS過渡--> <div id="app2"> <button v-on:click="show=!show">測試按鈕</button> <transition name="side-fade"> <p v-if="show">測試倆下</p> </transition> </div> <br> <!--CSS動畫--> <div id="app3"> <button v-on:click = "show = !show">測試按鈕</button> <transition name="bounce"> <p v-if="show">測試三下</p> </transition> </div> <br> </body> <script> /*過渡*/ /* var vm = new Vue({ el: '#app1', data: { show: true, ceshi: { fontsize: '30px', color: 'red' } }, methods: {} })*/ /*CSS過渡*/ /* new Vue({ el:'#app2', data:{ show:true } })*/ /*CSS動畫*/ new Vue({ el:'#app3', data:{ show:true } }) </script> </html>