Implementierungseffekt von Vue-Übergängen und -Animationen

 Verwenden Sie das Übergangs- Tag mit CSS3-Übergang, um [unvollständigen Code] zu erreichen:

Vue bietet außerdem vier Klassennamen: den Startpunkt des Eintritts (v-enter), den Endpunkt des Eintritts (v-enter-to), den Startpunkt des Abgangs (v-leave) und den Endpunkt von Abreise (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>

Hinweis : Der Startpunkt des Betretens und Verlassens entspricht „von“ in der CSS3-Animation; das Ende des Betretens und Verlassens entspricht „to“ in der CSS3-Animation.

 

 Verwenden Sie das Transition- Tag mit CSS3-Übergang, um [Vollversionscode] zu erreichen:

Im Allgemeinen ist der Startpunkt des Eintritts derselbe wie der Endpunkt des Verlassens, und der Endpunkt des Eintritts ist derselbe wie der Ausgangspunkt des Verlassens. Es kann also auch zusammengeführt werden. Um die ursprüngliche Stilstruktur des Elements nicht zu zerstören, wird außerdem empfohlen, das Übergangsattribut während des Animationseinstiegs und -ausstiegs zu schreiben.

<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>

Hinweis : Wenn das Übergangs-Tag keinen Namen hat, beginnen die oben genannten sechs Klassennamen alle mit v-. Wenn ein Name vorhanden ist, müssen die oben genannten sechs Klassennamen mit dem Namen - beginnen.

Verwenden Sie das Tag „transition-group“ , um mehrere Elemente gleich zu animieren:

 Das Transition-Tag kann nur ein Element enthalten. Wenn Sie mehrere Elemente einschließen möchten, müssen Sie das Transition-Group-Tag verwenden.

<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>

Hinweis : Im Transition-Group-Tag muss jedes Element einen Schlüsselwert haben, andernfalls wird ein Fehler gemeldet.

 Verwenden Sie eine Animationsbibliothek eines Drittanbieters:

Es wird empfohlen, die Animationsbibliothek animate.css zu verwenden. Empfohlene Adresse: https://animate.style/

 Installieren Sie die animate.css-Bibliothek und installieren Sie den Befehl:

npm install animate.css

 

 Fügen Sie Stildateien auf den Seiten ein, die verwendet werden müssen, oder global in main.js.

import "animate.css"

Das Hinzufügen eines Namens zum Übergangs-Tag bedeutet, dass diese Stilbibliothek verwendet wird.

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

 Wählen Sie dann den Animationseffekt beim Betreten und Verlassen der offiziellen Website von animate.css aus.

 Fügen Sie den Animationseffekt beim Betreten zum Attribut „enter-active-class“
 hinzu. Fügen Sie den Animationseffekt beim Verlassen zum Attribut „leave-active-class“ hinzu

<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>

 Dann ist es einsatzbereit!

 

Ursprünglicher Autor: Wu Xiaotang

Erstellungszeit: 28.4.2023