Die Verwendung von Animation vue

vue im Übergang wird seine eigene Animation haben, finden Sie auf der offiziellen Website: https://cn.vuejs.org/v2/guide/transitions.html

1.transition

<Transition> innere </ Übergang> Tag gewickelte Übergangselemente oder Komponenten

Bedingungen: 1 muss eine dynamische Komponente, v-show / sein v-if

　　　　2.transition root Packungsanordnung,

Bietet sechs Klassennamen im Übergang, die Übergangsanimationseffekte

v Geben Sie in den Zustand des Animationsstarts
V-Eingabe-aktiven Prozess der Eingabe
v-Eingabe zu dem Endzustand der Animation eingeben
v-verlassen links um die Animation zu starten
V-leave-aktiver Prozess um die Animation zu verlassen
Nach dem Stand der v-leave-to leave

Über den Klassennamen mit CSS3 Übergängen oder Animationen zu vervollständigen.

Wobei, wenn der Übergang Tag-Name benannt, wie name = ‚Fade‘ wird der Klassenname ersetzt mit der oben beschriebenen Einblendung eingeben,

        / * 入场前状态* / 
        .fade -Enter, .fade-leave- bis { 
            Opazität: 0 ; 
        } 
        / * 过渡* / 
        .fade -Enter aktive, .fade-leave- aktive { 
            transition: Opazität 0 .5s; 
        } 
        / * 动画* / 
        .ant -enter- active { 
            Animation: bounce - in 0 .5s; 
        } 
        .Ant -leave- active { 
            Animation: bounce - in 0  .5s Rückwärts
        }
        @keyframes aufprallen - in {
             0% { 
                Transformation: Skala ( 0 ); 
            }
             50% { 
                Transformation: Maßstab ( 1.5 ); 
            }
             100% { 
                Transformation: Maßstab ( 1 ); 
            } 
        }
     </ Style> 
</ head> 
<body> 
    <div id = "app"> 
        <button @ click = "Toggle">切换</ button> 
        <Übergang name = "fade"> 
            <div v-show =“ zeigen "> Hallo Welt </ div> 
        <
            <div v-show = "show"> css动画</ div> 
        </ Übergang> 
    </ div> 
    <script> var app = neue Vue ({ 
            el: '#app' , 
            Daten: Funktion () {
                 return { 
                    Show : wahr 
                } 
            }, 
            Methoden: { 
                Toggle () { dieses ! .show = diese .show 
                } 
            } 
        }) </ script> 
</ body>

2.transitionGroup Umschaltliste

Und Übergang transitionGroup Unterschied ist, dass, wenn es mehr Komponenten, die auf dem Übergang nicht verwendet werden kann, müssen transitionGroup

    <style> 
        .list - item { 
            display: inline - block; 
            Marge - rechts: 10px; 
        } 
        .List -Enter aktive, .list-leave- aktiven { 
            transition: alle 1s; 
        } 
        .List -Enter, .list-leave- bis { 
            Opazität: 0 ; 
            Transformation: translateY (30px) 
        }
     </ style> 
</ head> 
<body> 
    <div id = "app"> 
        <button @ click = "add"> Hinzufügen </ button>  
        <button @ click = "Entfernen"> Remove <
        <Übergang-Gruppe name = "list" 
            <span v- für = "Artikel in Artikel": key = "item" class = "list-item"> 
                {{item}}
             </ span> 
        < / Transition-Gruppe> 
    </ div>   
    <script> var app = neue Vue ({ 
            el: "#app" , 
            Daten: Funktion () {
                 return { 
                    Artikel: [ 1,2,3,4,5,6,7 , 8,9 ], 
                    nextNum: 10 
                } 
            },
            Methoden: { 
                randomIndex () {
        
                     Rückkehr Math.floor (Math.random () * dieses .items.length) 
                }, 
                add () { 
                    diese .items.splice ( dieses .randomIndex (), 0, dies .nextNum ++ ) 
                }, 
                remove () { 
                    diese .items.splice ( diese .randomIndex (), 1 ) 
                } 
            } 
        })
     </ script> 
</ body>

3.js Hookfunktion

Javascript Haken kann im Übergang erklären Eigenschaften mit Hilfe js Animation erreichen

vor-Eingabe (el) {} vor dem Beginn der Animation, setzen den Anfangszustand
eingeben (el, getan) {} Animate
After-Eingabe (el) {} Ende der Animation, cleanup
Eingabe-cancelled (el) {} abbrechen Film
vor-Urlaub (el) {}
verlassen (el, getan) {}
After-Urlaub (el) {}
leave-cancelled (el) {}

Wo stellt el der Übergang unterhalb der Baugruppe, um das Ende erfolgt eine Rückruffunktion, was der Übergang abgeschlossen ist. Fall unten zeigt die Wirkung getan.

  <style> 
    .fade -Enter-aktiv, .fade-leave- active { 
      Übergang: Opazität 0 .5s; 
    }
   </ Style> 
</ head> 

<body> 
  <div id = "app"> 
    <button @ click = "Toggle"> Toggle </ button> 
    <Übergang name = "fade"  
      @Before -Enter = "beforeEnter" 
      @ enter = "enter" 
      @Before -leave = "beforeLeave" 
      @leave = "leave"> 
      <div v-show = "show"> 
        Hallo Welt ! 
      </ div> 
    </ Übergang>
    VUE ({ 
      EL: '#app' , 
      Daten: Funktion () {
         return { 
          Show: true 
        } 
      }, 
      Methoden: { 
        Toggle () { 
          die diese = Der .Show! Das dies die .Show; 
        }, 
        // vor der Eingabe des Anfangszustand Animation 
        beforeEnter (EL) { 
          el.style.opacity = 0 ; 
        } 
        // Ende der Animation Zustand 
        eingeben (EL, DONE) { 
          el.style.opacity = 1. ;
           // hören Ende der Animation Ereignisse, done ausgeführt, wenn kein Ereignis - Listener Ende ist die oben tut Display richtig versteckt, aber immer besetzt die Position div Modul
          el.addEventListener ( 'transitionend' , DONE) 
        }, 
        // vor dem Verlassen Zustand 
        beforeLeave (EL) { 
          el.style.opacity = 1. ; 
        }, 
        // nach Zustand verlassen 
        Leave (EL, DONE) { 
          el.style.opacity = 0 ; 
          el.addEventListener ( 'transitionend' , DONE) 
        } 
      } 
    })

   </ script> 
</ body>

4. Die Einführung von animate.css Animation

Die endgültige Animation ist relativ einfach Animationseffekte direkt animate.css durch die Einführung zu erreichen,

Eingabe-aktiv-Klasse: Animation in den Animationsprozess
leave-Aktiv-Klasse: Animation die Animation Prozess verlassen

animate.css offizielle Website: http://www.jq22.com/yanshi819

    <! -引入CSS动画库-> 
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text / css"> 
< / head> 
<body> 
    <div id = "app"> 
        <button @ click = "Toggle"> Toggle </ button> 
        <Übergang Eingabe-active-class = "animiert bounceInLeft" 
            verlassen -active-class = "animiert bounceOutLeft" > 
            <div v-show = "show"> hellow Welt </ div> 
        </ Übergang> 
    </ div> 
    <script> var app = neue Vue ({ 
            el: '#app' ,
            (data) { return { 
                    Show: falsch
        
                
                } 
            }, 
            Methoden: { 
                Toggle () { 
                    this .show =! diese .show 
                } 
            } 
        })
     </ script> 
</ body>