Web前端培訓(xùn)：使用@keyframes創(chuàng)建CSS動畫
使用@keyframes創(chuàng)建CSS動畫的用法與前面講到的CSS過渡用法類似，區(qū)別在于動畫中v-enter類名在節(jié)點插入DOM后不會立即刪除，而是在animationend(動畫結(jié)束)事件觸發(fā)時刪除。
@keyframes規(guī)則創(chuàng)建動畫，就是將一套CSS樣式逐步演變成另一套模式，在創(chuàng)建動畫過程中，可以多次改變CSS樣式，通過百分比或關(guān)鍵詞from和to(等價于0%和100%)來規(guī)定動畫的狀態(tài)。@keyframes的語法格式為如下：
@keyframes animation-name {
?keyframes-selector { css-styles; }
}
在上述語法中，keyframes-selector表示動畫時長的百分比，css-styles表示一個或者多個合法的CSS樣式屬性。
下面我們通過例4-4演示如何使用@keyframes創(chuàng)建CSS動畫。
【例4-4】
(1)創(chuàng)建C：\vue\chapter04\demo04.html文件，具體代碼如下：
<div id="app">
? ?<button @click="show=!show">使用@keyframes創(chuàng)建CSS動畫</button>
? ?<transition name="bounce">
? ? ? ?<div class="circular" v-if="show">圓形</div>
? ?</transition></div><script>var vm = new Vue({ el: '#app', data: { show: true } })</script>
在上述代碼中，第2行給button按鈕添加了單擊事件，通過單擊按鈕，改變變量show的值，第4行的圓形就會根據(jù)CSS中@ketframes規(guī)則來完成動畫。
(2)在demo04.html文件中編寫CSS樣式，具體代碼如下：
div.circular {
? ?width: 100px; height: 100px; background: red;
? ?border-radius: 50%; margin-top: 20px; text-align: center;
? ?line-height: 100px; color: #fff;
}
.bounce-enter-active {
? ?animation: Ami .5s;
}
.bounce-leave-active {
? ?animation: Ami .5s;
}
@keyframes Ami {
? ?0% {transform: scale(0); background: red;}
? ?20% {transform: scale(1); background: burlywood;}
? ?50% {transform: scale(1.5); background: blueviolet;}
? ?100% {transform: scale(1); background: burlywood;}
}
在上述代碼中，因為transition的name屬性值為bounce，所以第6行和第9行的類名使用“bounce-”作為前綴名。第12～17行用于通過@keyframes規(guī)則來創(chuàng)建名稱為Ami的動畫樣式，其中，0%表示動畫的開始狀態(tài)，100%表示動畫的結(jié)束狀態(tài)。
(3)在瀏覽器中打開demo04.html，可以觀察動畫效果是否生效。
