Vue3 で要素とコンポーネント間でアニメーションを切り替える方法-Vue.js-php.cn

Vue3 で要素とコンポーネント間でアニメーションを切り替える方法

PHPz

リリース： 2023-05-14 14:16:11

転載

915 人が閲覧しました

#分析例

要素間のアニメーション切り替え

要素間のアニメーション切り替えは 2 つの

dom# を参照します。たとえば、1 つの div が消え、別の div が表示されます。消える場合はフェードアウト効果に対応し、表示される場合はフェードイン効果に対応します。この例では、では、2 つの div を使用し、1 つは hello world を表示し、もう 1 つは bye world を表示し、ボタンを使用してアニメーションの切り替えを制御します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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> .v-enter-from{ opacity: 0; } .v-enter-active{ transition: opacity 1s ease-in; } .v-enter-to{ opacity: 1; } .v-leave-from{ opacity: 1; } .v-leave-active{ transition:opacity 1s ease-in } .v-leave-to{ opacity: 0; } </style> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data() { return { show:false } }, methods: { handleClick(){ this.show = !this.show; } }, template: ` <transition mode="out-in" appear> <div v-if="show">hello world </div> <div v-else="show" >bye world </div> </transition> <button @click="handleClick">switch</button> ` }); const vm = app.mount(&#39;#root&#39;); </script></pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードに示すように、CSS を使用してフェードイン効果とフェードアウト効果を定義し、アニメーション化する

div

を # に配置します。 ## タグの間で、Boolean 変数 show を使用して要素の表示と非表示を制御します。ボタンをクリックすると、 handleClick 関数が show に対して実行され、スイッチング効果を実現するために変数が反転されます。コードでは、mode="out-in" が遷移タグで使用されていることもわかります。この mode の値は、実際には mode=" in- out"、2 つの違いは次のとおりです。 mode="out-in"

: 2 つの要素が切り替わると、現在の要素が最初に消えて、要素を再度表示します

#mode="in-out": 2 つの要素を切り替えると、表示される要素が最初に表示され、現在の要素が消えることを示します読者はこれら 2 つの要素を切り替えることができますすべての属性を試して効果を確認すると、印象はさらに深くなります。

コード内に属性が表示されていることがわかります。この属性は、インターフェイスを開いたときにブラウザの場合、アニメーションが実行されます。それ以外の場合は、ページが表示されます。ロード時にアニメーションはありません。

コンポーネント間のアニメーション切り替え

Vue では、コンポーネントをさらに使用します。実際には、アニメーションコンポーネント間で切り替えを実装することもできます。ここでは、上記の例を変更して、動的コンポーネントの形式で上記の要素間を切り替えるアニメーション効果を実現できます。コードは次のとおりです:

<!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>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 多个单组件之间的动画
    const ComponentA = {
        template:&#39;<div>hello world</div>&#39;
    }
    const ComponentB = {
        template:&#39;<div>bye world</div>&#39;
    }
 const app = Vue.createApp({
        data() {
            return {
               component:&#39;component-a&#39;
            }
        },
        methods: {
            handleClick(){
               if(this.component === &#39;component-a&#39;){
                this.component = &#39;component-b&#39;;
               }else{
                this.component = &#39;component-a&#39;;
               }
            }
        },
        components:{
            &#39;component-a&#39;:ComponentA,
            &#39;component-b&#39;:ComponentB
        },
        // 动态组件的方式
        template: 
        `
        <transition mode="out-in" appear>
            <component :is="component" />
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

ログイン後にコピー

以上がVue3 で要素とコンポーネント間でアニメーションを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。