Vue3之列表動畫和狀態(tài)動畫示例詳解
概述
列表動畫和狀態(tài)動畫都是增加用戶體驗的方法，當一個列表添加數(shù)據(jù)或者移除數(shù)據(jù)時，如果直接添加，突然顯示，未免有些突兀，而且用戶可能會不知道此時已經(jīng)有數(shù)據(jù)加入了，從列表中移除數(shù)據(jù)也是，用戶很有可能不知道當前已經(jīng)移除了哪一條數(shù)據(jù)。但是如果加上動畫就會好很多了，有趣的動畫可以吸引用戶的注意力，讓用戶關注新增和移除的數(shù)據(jù)。這就是列表動畫，而狀態(tài)動畫是指從一個狀態(tài)到另一個狀態(tài)的變化，如果直接變過去，就會顯得比較生硬，但是如果是加了動畫慢慢過渡過去會好很多。
示例解析
列表動畫
如上圖所示我們要展示一個數(shù)字構成的列表,右面有一個按鈕，點擊按鈕會執(zhí)行一個動畫增加數(shù)字。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表動畫</title>
<style>
.list-item{
display: inline-block;
margin-right: 10px;
}
.v-enter-from{
opacity: 0;
transform: translateY(30px);
}
.v-enter-active{
transition: all 1s ease-in;
}
.v-enter-to{
opacity: 1;
transform: translateY(0px);
}
.v-move{
transition: 2.5s ease-in;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
list:[1,2,3]
}
},
methods: {
handleClick(){
this.list.unshift(this.list.length+1);
}
},
template:
`
<div>
<transition-group>
<span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">add</button>
</div>
`
});
const vm = app.mount('#root');
</script>
我們先是使用CSS將列表的動畫效果定義出來，這個效果和之前講的動畫定義差不多，這里不過多贅述，定義好動畫后，我們在Vue的template中使用一個span將我們的數(shù)字列表顯示出來，然后最關鍵的是我們要使用 <transition-group>標簽將我們要做動畫的部分包裹起來。當我們點擊按鈕的時候，執(zhí)行js函數(shù)往列表中新增一個列表長度加一的數(shù)。動畫效果讀者可以，運行查看。
狀態(tài)動畫
狀態(tài)動畫比較簡單，就是從一個狀態(tài)到另一個狀態(tài)中間加一些過渡的值，主要是通過數(shù)據(jù)控制內(nèi)容的展示，比如從1變到10，如果直接1馬上變成10，則顯得很生硬，但是中間加一寫其他數(shù)字，比如2，3，4...最后再變成10就會好很多，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>狀態(tài)動畫</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 狀態(tài)動畫：通過數(shù)據(jù)控制內(nèi)容的展示
const app = Vue.createApp({
data() {
return {
number:1,
animateNumber: 1
}
},
methods: {
handleClick(){
this.number =10;
if(this.animateNumber<this.number){
const animation = setInterval(()=>{
this.animateNumber += 1;
if(this.animateNumber === 10){
clearInterval(animation)
}
},100);
}
}
},
template:
`
<div>
<div>{{animateNumber}}</div>
<button @click="handleClick">do</button>
</div>
`
});
const vm = app.mount('#root');
</script>
列表動畫比較簡單，我們點擊執(zhí)行按鈕的時候，使用js函數(shù)每隔100 毫秒就去修改一下當前顯示的值，直到值變成最終想要狀態(tài)的值就停止。
總結
列表動畫和狀態(tài)動畫都是為了增強用戶體驗，列表動畫主要是在列表中的數(shù)據(jù)變化的時候執(zhí)行的，而狀態(tài)動畫主要是當一個狀態(tài)更換到零一個狀態(tài)的時候執(zhí)行，列表動畫通過vue提供的<transition-group>標簽包裹需要執(zhí)行動畫的部分實現(xiàn)，而列表動畫通過控制數(shù)據(jù)內(nèi)容的展示實現(xiàn)，本文介紹的都是簡單的動畫效果，讀者若需要實現(xiàn)更炫麗的動畫效果，請關注腳本之家其它相關文章！
相關文章
vue使用smooth-signature實現(xiàn)移動端橫豎屏電子簽字
這篇文章主要為大家介紹了vue使用smooth-signature實現(xiàn)移動端橫豎屏電子簽字示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了Vue3配置代理后頁面500/404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
在?Vue?框架中,哪些地方容易被攻擊呢？寫代碼的時候要注意什么呢？這篇文章中小編為大家總結了一些常見的容易受到攻擊的地方,希望對大家有所幫助2024-02-02
這篇文章主要介紹了vue項目打包之后接口出現(xiàn)錯誤的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了Vue導出excel的兩個常用方式,分別為前端vue+XLSX導出excel和vue+后端POI?導出excel,感興趣的小伙伴可以了解下2025-01-01
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了詳解elementUI中input框無法輸入的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
在做vue3項目中時,每次使用都需要先進行引入,下面這篇文章主要給大家介紹了關于vue3?api自動導入的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程
大家都知道vue.js通過v-on完成事件處理與綁定，但最近使用v-on的時候遇到了一個問題，所以下面這篇文章主要給大家介紹了關于vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了Vue中的變量賦值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10