vue中動畫關鍵幀keyframes 和 animation 和animate動畫庫
阿新 • • 發佈：2018-11-21
（1）
<style> @keyframes fontScale { 0% { font-size: 30px; } 100% { font-size: 50px; } } .fade-leave-active { animation: fontScale 3s } .fade-enter-active { animation: fontScale 3s } </style> </head> <body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade"> <div v-if="show" class="de">sfsf</div> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body>
特點：transition name 包裹 顯示隱藏的標籤，樣式中：@keyframes定義動畫的名字和開始到結束的樣式，name-enter-active和name-enter-active使用animation動畫，設定時間、reverse等值。
（2）name-enter-active 和name-leave-active 是系統新增的，可以自己設定這兩個類的名字
<style> .de { height: 100px; width: 100px; background: red; } @keyframes fontScale { 0% { height: 30px; } 100% { height: 50px; } } .leave { animation: fontScale 3s } .enter { animation: fontScale 3s reverse; } </style> </head> <body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade" enter-active-class="enter" leave-active-class="leave"> <div v-if="show" class="de">sfsf</div> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body>
（3）這樣就可以使用animation庫
<body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake"> <div v-if="show" class="de">sfsf</div> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body>