Vue3のリストアニメーションとステートアニメーションを適用する方法-Vue.js-php.cn

Vue3のリストアニメーションとステートアニメーションを適用する方法

王林

リリース： 2023-05-22 09:43:19

転載

1364 人が閲覧しました

概要

リストアニメーションとステータスアニメーションはどちらもユーザーエクスペリエンスを向上させる方法です。リストにデータを追加するとき、またはリストからデータを削除するとき、データを直接追加する場合は、 , 突然の表示なので、ユーザーはこの時点でデータが追加されたことが分からない可能性がありますが、リストからデータを削除する場合も同様で、どのデータが削除されたのかユーザーは分からない可能性があります。興味深いアニメーションは非常に魅力的であり、ユーザーが新しいデータや削除されたデータに集中しやすくなるため、アニメーションを追加するとユーザーエクスペリエンスが向上します。これはリストアニメーションで、状態アニメーションとはある状態から別の状態への変化のことを指しますので、直接変更すると硬い印象になりますが、ゆっくりと遷移するアニメーションを追加するとより良くなります。

分析例

リストアニメーション

Vue3のリストアニメーションとステートアニメーションを適用する方法

上の図に示すように、数値のリストを表示したいとします。右側のボタンをクリックして、ボタンをクリックするとアニメーションが実行され、数値が増加します。コードは次のとおりです:

<!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(&#39;#root&#39;);
</script>

ログイン後にコピー

まず CSS を使用してリストのアニメーション効果を定義します。この効果は前述のアニメーション定義に似ています。ここでは詳細は説明しません。アニメーションを定義した後では、スパンを使用して数値のリストを表示します。次に最も重要なことは、<transition-group> タグを使用してアニメーション化する部分をラップすることです。ボタンをクリックすると、js 関数が実行され、リストの長さに 1 を加えた数値がリストに追加されます。読者はアニメーションを実行することでアニメーション効果を確認できます。

状態アニメーション

Vue3のリストアニメーションとステートアニメーションを適用する方法

状態アニメーションは比較的単純です。つまり、ある状態から別の状態への遷移値を追加し、主にデータを通じてコンテンツを制御します。 . 例えば、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(&#39;#root&#39;);
</script>

ログイン後にコピー

リストアニメーションは比較的単純です。実行ボタンをクリックすると、js 関数を使用して、値が最終的な望ましい状態。

以上がVue3のリストアニメーションとステートアニメーションを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。