Vueトランジションとアニメーションの実装効果

[不完全なコード] を実現するには、CSS3 トランジションでトランジションタグを使用します。

Vue は、エントリーの開始点 (v-enter)、エントリーの終了点 (v-enter-to)、出発点の開始点 (v-leave)、および終了点の 4 つのクラスクラス名も提供します。出発 (v-leave-to)

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition appear>
            <h2 v-show="isShow">你好呀！！！</h2>
        </transition>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
    transition: 0.5s linear;
}
/* 进入的起点 */
.v-enter {
    transform: translate(-100%);
}
/* 进入的终点 */
.v-enter-to {
    transform: translate(0px);
}
/* 离开的起点 */
.v-leave {
    transform: translate(0px);
}
.v-leave-to {
    transform: translate(-100%);
}
</style>

注: 入力および退出の開始点は CSS3 アニメーションの from に相当し、入力および退出の終了点は CSS3 アニメーションのに相当します。

[完全なバージョンのコード] を実現するには、CSS3 トランジションでトランジションタグを使用します。

一般に、参入の開始点は退出の終点と同じであり、参入の終点は退出の開始点と同じです。したがって、一緒に統合することもできます。また、要素本来のスタイル構造を壊さないために、アニメーションの開始と終了の過程でtransition属性を記述することを推奨します。

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition appear>
            <h2 v-show="isShow">左右滑动</h2>
        </transition>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入的起点、离开的终点 */
.v-enter, .v-leave-to {
    transform: translate(-100%);
}
/* 动画进入的过程、动画离开的过程 */
.v-enter-active, .v-leave-active {
    transition: 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to, .v-leave {
    transform: translate(0px);
}
</style>

注: 遷移タグに名前がない場合、上記の 6 つのクラス名はすべて v- で始まります。名前がある場合、上記 6 つのクラス名は名前 - で始まる必要があります。

複数の要素を同じようにアニメーション化するには、transition-groupタグを使用します。

トランジションタグには 1 つの要素のみを含めることができます。複数の要素を含める場合は、transition-group タグを使用する必要があります。

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group appear>
            <h2 v-show="isShow" :key="1">为true时显示</h2>
            <h2 v-show="!isShow" :key="2">为false时显示</h2>
        </transition-group>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入的起点、离开的终点 */
.v-enter,
.v-leave-to {
    transform: translate(-100%);
}
/* 动画进入的过程、动画离开的过程 */
.v-enter-active,
.v-leave-active {
    transition: 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to,
.v-leave {
    transform: translate(0px);
}
</style>

注:transition-group タグでは、各要素にキー値が必要です。そうでない場合は、エラーが報告されます。

サードパーティのアニメーションライブラリを使用します。

animate.css アニメーションライブラリを使用することをお勧めします。推奨アドレス: https://animate.style/

animate.css ライブラリをインストールし、次のコマンドをインストールします。

npm animate.css をインストールする

使用する必要があるページにスタイルファイルを導入するか、main.js にグローバルにスタイルファイルを導入します。

import "animate.css"

トランジションタグに名前を追加するということは、このスタイルライブラリを使用することを意味します。

<transition name="animate__animated animate__bounce" appear>
    <h2 v-show="isShow">使用第三方动画库</h2>
</transition>

次にanimate.cssの公式サイトで入場時と退場時のアニメーション効果を選択します。

enter-active-class属性に入場時のアニメーション効果を追加
Leave-active-class属性に退出時のアニメーション効果を追加

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition 
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__backInDown"
            leave-active-class="animate__backInLeft"
        >
            <h2 v-show="isShow">使用第三方动画库</h2>
        </transition>
    </div>
</template>

<script>
import "animate.css"
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
</style>

これで使用準備完了です。

原作者：呉暁棠

作成時期：2023.4.28

Vueトランジションとアニメーションの実装効果

おすすめ