Web前端培訓(xùn)：使用@keyframes創(chuàng)建CSS動(dòng)畫

　　使用@keyframes創(chuàng)建CSS動(dòng)畫的用法與前面講到的CSS過渡用法類似，區(qū)別在于動(dòng)畫中v-enter類名在節(jié)點(diǎn)插入DOM后不會(huì)立即刪除，而是在animationend(動(dòng)畫結(jié)束)事件觸發(fā)時(shí)刪除。

　　@keyframes規(guī)則創(chuàng)建動(dòng)畫，就是將一套CSS樣式逐步演變成另一套模式，在創(chuàng)建動(dòng)畫過程中，可以多次改變CSS樣式，通過百分比或關(guān)鍵詞from和to(等價(jià)于0%和100%)來規(guī)定動(dòng)畫的狀態(tài)。@keyframes的語法格式為如下：

@keyframes animation-name {
  keyframes-selector { css-styles; }
}

　　在上述語法中，keyframes-selector表示動(dòng)畫時(shí)長的百分比，css-styles表示一個(gè)或者多個(gè)合法的CSS樣式屬性。

　　下面我們通過例4-4演示如何使用@keyframes創(chuàng)建CSS動(dòng)畫。

　　【例4-4】

　　(1)創(chuàng)建C：\vue\chapter04\demo04.html文件，具體代碼如下：

<div id="app">
    <button @click="show=!show">使用@keyframes創(chuàng)建CSS動(dòng)畫</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行的圓形就會(huì)根據(jù)CSS中@ketframes規(guī)則來完成動(dòng)畫。

　　(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;}
}

　　在上述代碼中，因?yàn)閠ransition的name屬性值為bounce，所以第6行和第9行的類名使用“bounce-”作為前綴名。第12～17行用于通過@keyframes規(guī)則來創(chuàng)建名稱為Ami的動(dòng)畫樣式，其中，0%表示動(dòng)畫的開始狀態(tài)，100%表示動(dòng)畫的結(jié)束狀態(tài)。

　　(3)在瀏覽器中打開demo04.html，可以觀察動(dòng)畫效果是否生效。