深入了解 Vue 3 中的 Keyframes 動畫

在本文中，我們將探討如何在 Vue 3 中實現 Keyframes 動畫。Keyframes 動畫允許我們通過定義關鍵幀來創建復雜的動畫效果，從而為用戶提供更吸引人的界面體驗。

transition動畫適合用來創建簡單的過渡效果。CSS3中支持使用animation屬性來配置更加復雜的動畫效果。animation屬性根據keyframes配置來執行基於關鍵幀的動畫效果。新建一個名為keyframes.vue的測試文件。編寫如下代碼：

<template>
<view class="content">
<div id="Application">
<div :class="cls" @click="run"></div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
cls: "demo"
}
},
onLoad() {
},
methods: {
run() {
if (this.cls == "demo") {
this.cls = "demo-ani"
} else {
this.cls = "demo"
}
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 60px;
}
/* .demo {
width: 100px;
height: 100px;
background-color: red;
} */
@keyframes animation1 {
0% {
background-color: red;
width: 100px;
height: 100px;
}
25% {
background-color: orchid;
width: 200px;
height: 200px;
}
75% {
background-color: green;
width: 150px;
height: 150px;
}
100% {
background-color: blue;
width: 200px;
height: 200px;
}
}
.demo {
width: 100px;
height: 100px;
background-color: red;
}
.demo-ani {
animation: animation1 4s linear;
width: 200px;
height: 200px;
background-color: blue;
}
</style>

在上面的CSS代碼中，keyframes用來定義動畫的名稱和每個關鍵幀的狀態，0%表示動畫起始時的狀態，25%表示動畫執行到1/4時的狀態，同理，100%表示動畫的終止狀態。對於每個狀態，我們將其定義為一個關鍵幀，在關鍵幀中，可以定義元素的各種渲染屬性，比如寬和高、位置、顏色等。在定義keyframes時，如果隻關心起始狀態與終止狀態，也可以這樣定義：

@keyframes animationl {
from {
background-color:red; width: 100px; height: 100px;
}
to {
background-color:orchid; width: 200px; height: 200px;}
}

定義好了keyframes關鍵幀，在編寫CSS樣式代碼時可以使用animation屬性為其指定動畫效果，如以上代碼設置要執行的動畫為名為animation1的關鍵幀動畫，執行時長為2秒，執行方式為線性。animation的這些配置項也可以分別進行設置，示例如下：

.demo-ani {
/*設置關鍵幀動畫名稱 */
animation-name:animationl;/*設置動畫時長 */
animation-duration:2s;
/*設置動畫播放方式:漸入漸出*/
animation-timing-function:ease-in-out;/*設置動畫播放的方向*/
animation-direction:alternate;/*設置動畫播放的次數 */
animation-iteration-count: infinite;/*設置動畫的播放狀態*/
animation-play-state:running;/*設置播放動畫的延遲時間*/ animation-delay:1s;
/*設置動畫播放結束應用的元素樣式*/ animation-fill-mode:forwards; width: 200px; height: 200px;
background-color:blue;
}

通過上面的范例，我們已經基本了解了如何使用原生的CSS，有了這些基礎，再使用Vue中提供的動畫相關API時會非常容易。

希望這篇博客論文能夠幫助開發者更好地理解和應用 Vue 3 中的 Keyframes 動畫，為項目帶來更加出色的用戶體驗

#記錄我的2024##精品長文創作季##微頭條首發挑戰賽##vue##前端組件##前端##css##動畫##html css#