在本文中，我們將深入探討 Vue 3 中實現 Transition 過渡動畫的技術細節。過渡動畫可以為用戶界面增添平滑和生動的效果，提升用戶體驗。
首先新建一個基於uni-app框架為transition.vue的測試文件，在其中編寫如下JavaScript、HTML和CSS代碼：
<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;
}
/* .demo {
width: 100px;
height: 100px;
background-color: red;
} */
.demo {
width: 100px;
height: 100px;
background-color: red;
transition-property: width, height， background-color;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
.demo-ani {
width: 200px;
height: 200px;
background-color: blue;
transition: width 2s, height 2s, background-color 2s;
}
</style>
如以上代碼所示，CSS中定義的demo-ani類中指定了transition屬性，這個屬性中可以設置要過渡的屬性以及動畫時間。運行上面的代碼，單擊頁面中的色塊，可以看到色塊變大的過程會附帶動畫效果，顏色變化的過程也附帶動畫效果。上面的示例代碼實際上使用了簡寫方式，我們也可以逐條屬性對動畫效果進行設置。
其中，transition-property用來設置動畫的屬性；transition-duration用來設置動畫的執行時長；
transition-timing-function用來設置動畫的執行方式，linear表示以線性的方式執行；transition-delay用來進行延時設置，即延時多長時間後開始執行動畫。
希望這篇博客論文能夠幫助開發者更好地理解和應用 Vue 3 中的 Transition 過渡動畫，為項目帶來更加出色的用戶體驗。