[Vue fünf Minuten] Fünf Minuten zum Verstehen

Inhaltsverzeichnis

Vorwort

1. Die Übergangskomponente in vue

2. Die Übergangskomponente wendet CSS-Übergänge an

(1) Anzahl der Einheiten/Komponentenübergang

(2) Mehrfachelementübergänge

(3) Mehrfachkomponentenübergänge

(4) Listenübergang

3. JavaScript-Hooks

Vorwort

Unsere fünfminütige vue-Serie ist sehr lang. Es ist eine Reihe von Artikeln und Blogs. Jeden Tag aktualisieren wir, was wir gelernt haben. Wenn Sie interessiert sind, können Sie liken und folgen. Wir werden gemeinsam lernen. Der Blogger zeichnet einfach auf jeden Teil. Fassen Sie das gelernte Wissen zusammen. Wenn es Ihnen nicht gefällt, sprühen Sie es nicht. Es ist nicht einfach, es zusammenzufassen. Es gibt viele verwandte Ansichten an Station C, die nur Zusammenfassungen sind.

Nun, wir können jetzt etwas über die Transition von Vue lernen. Vue bietet viele verschiedene Übergangseffekte beim Einfügen, Aktualisieren und Entfernen von DOM-Elementen. Wenn Sie automatisch Klassen in CSS-Übergängen anwenden, können Sie JavaScript in der Transition-Hook-Funktion verwenden, um die direkt zu manipulieren Dom.

1. Die Übergangskomponente in vue

Vue bietet diese Übergangskomponente, die jedem Element und jeder Komponente während des bedingten v-if-Renderings, der bedingten v-show-Anzeige und dynamischen Komponenten Eintritts- oder Austrittselementübergänge hinzufügen kann.

2. Die Übergangskomponente wendet CSS-Übergänge an

Beim Anwenden von CSS-Übergängen fügt die Übergangskomponente Elemente zum geeigneten Zeitpunkt hinzu und entfernt sie. Unsere Übergangskomponente enthält die folgenden 6 Übergangskategorien;

v-enter: Definiert, dass beim Eintreten in den Übergang das Element vor dem Einfügen wirksam wird und nach dem Einfügen des Elements den nächsten Frame überläuft.
v-enter-active: zum Zeitpunkt der Definition in dem Zustand, in dem der Übergang wirksam ist, während der Eintrittsübergangsphase angewendet, wirksam, bevor das Element eingefügt wird, und entfernt, nachdem der Übergang abgeschlossen ist.
v-enter-to: Definiert den Endzustand des Eintritts in den Übergang, der im nächsten Frame nach dem Einfügen des Elements wirksam wird und nach Abschluss des Übergangs entfernt wird.
v-leave: Definiert den Startzustand des Leave-Übergangs, der sofort wirksam wird, wenn der Leave-Übergang ausgelöst wird, und das nächste Bild nach außen verschoben wird.
v-leave-active: Der Zustand, wenn der Übergang, der das Verlassen definiert, aktiv ist.
v-leave-to: Definiert den Endzustand des Leave-Übergangs.

Von den sechs Übergangsklassen, die wir zusammengefasst haben, sind die ersten drei Übergangsklassen und die letzten drei Übergangsklassen.Im Prozess des Eintritts oder Austritts werden die sechs Übergangsklassen aufeinander umgeschaltet.

(1) Anzahl der Einheiten/Komponentenübergang

In der Übergangskomponente ist nur ein Element enthalten, und der Übergang wird definiert, wenn dieses Element eingefügt oder gelöscht wird. Wir können es uns mit einer einzigen Codezeile ansehen:

Beispielcode:

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

Laufendes Ergebnis: Wir können sehen, aber das Kontrollkästchen "Ich habe die Ankündigung der Spielzeit der Königlichen Minderjährigen zur Kenntnis genommen" anklicken, und dann wird unser "Spiel starten" auf der Seite ausgeblendet, aber wenn wir das Kontrollkästchen deaktivieren it , "Start Game" wird von unserer Seite ausgeblendet.

Da unsere Komponente mit name="fade" festgelegt ist, können wir beim Definieren des Stils das Präfix von fade verwenden, z. B. .fade-enter im Code usw. Nachdem der Stil definiert ist, besteht keine Notwendigkeit, ihn manuell einzuführen Damit können Übergangskomponenten Elemente unserer Schaltfläche "Spiel starten" genau richtig hinzufügen und entfernen.

(2) Mehrfachelementübergänge

Die Übergangskomponente enthält mehrere Elemente, die beim Einfügen oder Löschen Übergänge definieren. Werfen wir einen Blick auf den Code. Wir müssen ihn nicht ändern, und andere Codes müssen nicht geändert werden. Wir müssen ihn nur im vorherigen Kapitel des Teils mit einzelnen Elementen ändern.

Beispielcode:

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

Operationsergebnis:

Wenn wir die obigen Ergebnisse sehen, können wir verstehen, warum die obigen Ergebnisse auftreten, weil wir den Übergang auf das Attribut „Erscheinungsmodus“ setzen, das verwendet wird, um den Knoten so einzustellen, dass er den Übergangseffekt anwendet, wenn er anfänglich gerendert wird. Wenn wir das Wiederverwendungsfeld auswählen, wird der Absatz "Zuerst lesen ..." ausgeblendet und "Spiel starten" wird eingeblendet. Dies liegt daran, dass wir den Modus auf out-in setzen und das mode-Attribut verwendet wird, um den Übergangsmodus festzulegen.

(3) Mehrfachkomponentenübergänge

Der Übergang mehrerer Komponenten ist einfacher als der Übergang mehrerer Elemente, da beim Übergang des Elements das Schlüsselattribut nicht verwendet wird und nur dynamische Komponenten verwendet werden müssen. Sehen wir uns die Ergebnisse des Beispielcodes genauer an:

Beispielcode:

(4) Listenübergang

Der Listenübergang verwendet die Übergangsgruppenkomponente.Anders als die Übergangsgruppenkomponente enthält die Übergangsgruppenkomponentemehr Attribute, wie etwa: das Modusattribut ist nicht verfügbar, nur ein Schlüsselattributkann darin enthalten sein, und der CSS-Übergang wird glatt sein Wird auf interne Elemente angewendet und als echtes Element gerendert. Werfen wir einen Blick auf diesen Listenübergang durch Code:

Beispielcode:

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

Operationsergebnis:

Wir haben die Komponente von -group hier auf tag='ul' gesetzt, sodass der Attributwert von xuehao in den Schlüsselattributwertdaten jedes Listenelements li-Element sicherstellt, dass sein Attributwert ein eindeutiges Attribut ist. Die Ergebnisse sind wie oben, die Wirkung ist nicht viel zu sagen, jeder kann zuschauen.

3. JavaScript-Hooks

Die JavaScript-Hook-Funktion kann mit der v-on-Anweisung in der Übergangskomponente gebunden werden.Der Übergangszyklus kann die folgenden Hook-Funktionen haben:


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

Beispielcode:

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

Operationsergebnis:

Wir können sehen, dass, wenn wir auf das Kontrollkästchen klicken, "Registrierung bestätigen" langsam angezeigt wird und das Deaktivieren nicht ausgeblendet wird!