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

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

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

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

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

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

　　【例4-4】

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

<div id="app">
    <button @click="show=!show">使用@keyframes創(chuàng)建CSS動(dòng)畫(huà)</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按鈕添加了單擊事件，通過(guò)單擊按鈕，改變變量show的值，第4行的圓形就會(huì)根據(jù)CSS中@ketframes規(guī)則來(lái)完成動(dòng)畫(huà)。

　　(2)在demo04.html文件中編寫(xiě)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行的類(lèi)名使用“bounce-”作為前綴名。第12～17行用于通過(guò)@keyframes規(guī)則來(lái)創(chuàng)建名稱(chēng)為Ami的動(dòng)畫(huà)樣式，其中，0%表示動(dòng)畫(huà)的開(kāi)始狀態(tài)，100%表示動(dòng)畫(huà)的結(jié)束狀態(tài)。

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