ホームページ > 記事 > ウェブフロントエンド > Vue3のリストアニメーションとステートアニメーションを適用する方法
Vue3のリストアニメーションとステートアニメーションを適用する方法
- 王林転載
- 2023-05-22 09:43:191321ブラウズ
概要
リスト アニメーションとステータス アニメーションはどちらもユーザー エクスペリエンスを向上させる方法です。リストにデータを追加するとき、またはリストからデータを削除するとき、データを直接追加する場合は、 , 突然の表示なので、ユーザーはこの時点でデータが追加されたことが分からない可能性がありますが、リストからデータを削除する場合も同様で、どのデータが削除されたのかユーザーは分からない可能性があります。興味深いアニメーションは非常に魅力的であり、ユーザーが新しいデータや削除されたデータに集中しやすくなるため、アニメーションを追加するとユーザー エクスペリエンスが向上します。これはリストアニメーションで、状態アニメーションとはある状態から別の状態への変化のことを指しますので、直接変更すると硬い印象になりますが、ゆっくりと遷移するアニメーションを追加するとより良くなります。
分析例
リストアニメーション
上の図に示すように、数値のリストを表示したいとします。右側のボタンをクリックして、ボタンをクリックするとアニメーションが実行され、数値が増加します。コードは次のとおりです:
<!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 を使用してリストのアニメーション効果を定義します。この効果は前述のアニメーション定義に似ています。ここでは詳細は説明しません。アニメーションを定義した後では、スパンを使用して数値のリストを表示します。次に最も重要なことは、<transition-group></transition-group> タグを使用してアニメーション化する部分をラップすることです。ボタンをクリックすると、js 関数が実行され、リストの長さに 1 を加えた数値がリストに追加されます。読者はアニメーションを実行することでアニメーション効果を確認できます。
状態アニメーション
状態アニメーションは比較的単純です。つまり、ある状態から別の状態への遷移値を追加し、主にデータを通じてコンテンツを制御します。 . 例えば、1から10への変化を表示します。1をそのまま10に変えると非常に硬い印象になりますが、途中に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>状态动画</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 状态动画：通过数据控制内容的展示
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>リスト アニメーションは比較的単純です。実行ボタンをクリックすると、js 関数を使用して、値が最終的な望ましい状態。
以上がVue3のリストアニメーションとステートアニメーションを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。