【Vue5分】5分でわかる - Vue遷移

序文

1. vue のトランジションコンポーネント

次に、トランジションコンポーネントが CSS トランジションを適用します。

序文

私たちの vue の 5 分間のシリーズは非常に長いです. これは一連の記事とブログです. 毎日, 学んだことを更新します.各パート. 学んだ知識を要約する. 気に入らない場合は、スプレーしないでください. 要約するのは簡単ではありません. 駅Cには要約だけの関連するビューがたくさんあります.

さて、Vue のトランジションについて学習できるようになりました. Vue は、DOM 要素を挿入、更新、および削除するときに、さまざまなトランジション効果を提供します. CSS トランジションでクラスを自動的に適用する場合は、トランジションフック関数で JavaScript を使用して直接操作するだけです.ドム。

1. vue のトランジションコンポーネント

Vue はこの遷移コンポーネントを提供します。これは、v-if 条件付きレンダリング、v-show 条件付き表示、および動的コンポーネント中に、任意の要素およびコンポーネントに開始または終了要素遷移を追加できます。

次に、トランジションコンポーネントが CSS トランジションを適用します。

CSS トランジションを適用すると、トランジションコンポーネントは適切なタイミングで要素を追加および削除します。トランジションコンポーネントには、次の 6 つのトランジションカテゴリが含まれています。

v-enter: トランジションに入ると、挿入前に要素が有効になり、要素が挿入された後の次のフレームでオーバーフローすることを定義します。
v-enter-active: 定義時、遷移が有効な状態で、開始遷移フェーズ全体に適用され、要素が挿入される前に有効になり、遷移が完了した後に削除されます。
v-enter-to: 要素が挿入された後の次のフレームで有効になり、遷移が完了した後に削除される遷移に入る終了状態を定義します。
v-leave: Leave トランジションの開始状態を定義します. Leave トランジションがトリガーされるとすぐに有効になり、次のフレームが移動されます.
v-leave-active: leave を定義する遷移がアクティブなときの状態。
v-leave-to: 脱退遷移の終了状態を定義します。

要約した6つの遷移クラスのうち、最初の3つは遷移クラス、最後の3つは遷移クラスです. 入るまたは出る過程で、6つの遷移クラスは互いに切り替わります.

(1) ユニット数・成分推移

トランジションコンポーネントには 1 つの要素のみが含まれ、この要素が挿入または削除されるとトランジションが定義されます。1行のコードでそれを見ることができます：

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态</title>
</head>
<body>
    <div id="app">
<input type="checkbox" v-model="guodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade">
    <p v-if="guodu"><button>开始游戏</button></p>
</transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{guodu:false}
    });
</script>


<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>

</body>



</html>

実行結果: 「王様の未成年者の試合時間の発表を認識しました」のチェックボックスをクリックして選択すると、「ゲームの開始」がページ上でフェードアウトしますが、チェックを外すと、すると、「ゲーム開始」がページからフェードアウトします。

コンポーネントは name="fade" で設定されているため、コード内の .fade-enter など、スタイルを定義するときに、fade のプレフィックスを使用できます。スタイルが定義された後、手動で導入する必要はありません。つまり、遷移コンポーネントは、「ゲームを開始」ボタンの要素を適切に追加および削除できます。

(2) 複数要素遷移

transition コンポーネントには、挿入時または削除時の遷移を定義する複数の要素が含まれています。コードを見てみましょう. 私たちはそれを変更する必要はありません, そして、他のコードは変更する必要はありません. 単一要素部分の前の章でそれを変更するだけで済みます.

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态</title>
</head>
<body>
    <div id="app">
<input type="checkbox" v-model="DGguodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade" appear mode="out-in">
    <p v-if="DGguodu" key="1"><button>开始游戏</button></p>
    <p v-else key="2">先阅读公告后进行游戏</p>
</transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{DGguodu:false}
    });
</script>


<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>

</body>



</html>

操作結果:

上記の結果を見ると、上記の結果が発生する理由を理解できます。なぜなら、最初にレンダリングされるときにトランジション効果を適用するようにノードを設定するために使用される、appear mode アトリビュートにトランジションを設定したからです。再利用ボックスを選択すると、「Read first...」という段落がフェードアウトし、「Start the game」がフェードインします。これは、モードを out-in に設定し、モード属性を使用して遷移モードを設定するためです。

(3) 複数のコンポーネント遷移

複数のコンポーネントの遷移は、要素の遷移時に key 属性を使用せず、動的コンポーネントのみを使用する必要があるため、複数の要素の遷移よりも単純です。サンプルコードの結果を詳しく見てみましょう。

コード例:

(4) リスト遷移

The list transition uses the transition-group component. transition コンポーネントとは異なり、transition-group コンポーネントにはより多くの属性が含まれています: mode 属性は利用できない、キー属性は 1 つだけ内部に含めることができ、css トランジションはスムーズになります内部要素に適用され、実際の要素としてレンダリングされます。このリスト遷移をコードで見てみましょう。

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表过渡</title>
</head>
<body>
    <div id="app">
        <h1>2022届大学生新生入学登记：</h1>
<form>
    <p><label for="name">姓名：</label>
    <input type="text" v-model="stuInfo.name" id="name"></p>
    <p><label for="xuehao">学号:</label>
    <input type="xuehao" v-model="stuInfo.xuehao" id="xuehao"></p>
<p><button @click="add" type="button">添加</button></p>
</form>

<transition-group tag="ul" name="fade">
    <li v-for="(item,index) in students" :key="item.xuehao">{
   
   {index+1}}--{
   
   {item.name}}--{
   
   {item.xuehao}}<button @click="del(index)">删除</button>
    </li>
</transition-group>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            stuInfo:{xuehao:"  "},
            students:[]
        },
        methods:{
            add(){
                this.students.push(this.stuInfo);
                this.stuInfo={};
            },
            del(index){this.students.splice(index,1);}
        }
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

操作結果:

ここでは、-group のコンポーネントを tag='ul' に設定して、各リスト項目の li 要素のキー属性値データの xuehao の属性値が、その属性値が一意の属性であることを保証します。結果は上記の通りで、効果は言うまでもなく、どなたでもご覧いただけます。

3. JavaScript フック

The JavaScript hook function can be bind using the v-on instruction in the transition component. 遷移サイクルには、次のフック関数を含めることができます。


    <transition v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterenter"
    v-on:enter-cancelled="entercanclled"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
    >
    </transition>

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>钩子函数实现动画</title>
</head>
<body>
    <div id="app">
        
        <input type="checkbox" v-model="already" id="ck"/>
        <label for="ck">我已经阅读了相关的报名需求</label>
        <transition 
         @before-enter="beforeEnter"
         @enter="enter"
         @after-enter="after-enter"
        >
    <p class="show" v-if="already"><button>确定报名</button></p></transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
already:false
        },
        methods:{
            beforeEnter:function(el){
                el.style="opacity:0";console.log("beforeEnter");
            },
            enter:function(el,done) {
                el.offsetHeight;
                el.style = "opacity:1";
                console.log("enter");
                done();
            },
            afterEnter:function(el){
                console.log("afterEnter");
            }
        }
    });
</script>
<style>
    .show {
        transition: all 2s;
    }
</style>
</body>
</html>

操作結果:

チェックボックスをクリックすると、「登録の確認」がゆっくりと表示され、チェックを外してもフェードアウトしないことがわかります。