VueJS - Übergang und Animation

In diesem Kapitel werden die in VueJS verfügbaren Übergangs- und Animationsfunktionen erläutert.

Überleitung

VueJS bietet verschiedene Möglichkeiten, um den Übergang auf die HTML-Elemente anzuwenden, wenn diese im DOM hinzugefügt / aktualisiert werden. VueJS verfügt über eine integrierte Übergangskomponente, die um das Element gewickelt werden muss, das einen Übergang benötigt.

Syntax

<transition name = "nameoftransition">
   <div></div>
</transition>

Betrachten wir ein Beispiel, um die Funktionsweise des Übergangs zu verstehen.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Es gibt eine Schaltfläche namens clickme, mit der wir den Wert der Variablen show in true in false und umgekehrt ändern können. Da ist einp tagDies zeigt das Textelement nur an, wenn die Variable wahr ist. Wir haben das p-Tag mit dem Übergangselement umbrochen, wie im folgenden Code gezeigt.

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

Der Name des Übergangs ist fade. VueJS bietet einige Standardklassen für den Übergang, und den Klassen wird der Name des Übergangs vorangestellt.

Es folgen einige Standardklassen für den Übergang -

  • v-enter- Diese Klasse wird zunächst aufgerufen, bevor das Element aktualisiert / hinzugefügt wird. Es ist der Ausgangszustand.

  • v-enter-active- Diese Klasse wird verwendet, um die Verzögerung, Dauer und Beschleunigungskurve für den Eintritt in die Übergangsphase zu definieren. Dies ist der aktive Zustand für die gesamte Klasse und die Klasse ist während der gesamten Eintrittsphase verfügbar.

  • v-leave - Wird hinzugefügt, wenn der Austrittsübergang ausgelöst wird, entfernt.

  • v-leave-active- Während der Abgangsphase angewendet. Es wird entfernt, wenn der Übergang abgeschlossen ist. Diese Klasse wird verwendet, um die Verzögerung, Dauer und Beschleunigungskurve während der Abgangsphase anzuwenden.

Jeder der oben genannten Klassen wird der Name des Übergangs vorangestellt. Wir haben den Namen des Übergangs als Fade angegeben, daher wird der Name der Klassen.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

Sie werden im folgenden Code definiert.

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

.Fade_enter_active und .fade_leave_active werden zusammen definiert und es wird ein Übergang zu Beginn und in der Abgangsphase angewendet. Die Deckkrafteigenschaft wird in 2 Sekunden auf 0 geändert.

Die Dauer wird in .fade_enter_active und .fade_leave_active definiert. Die letzte Stufe wird im .fade_enter, .fade_leave_to definiert.

Die Anzeige im Browser ist wie folgt.

Durch Klicken auf die Schaltfläche wird der Text in zwei Sekunden ausgeblendet.

Nach zwei Sekunden verschwindet der Text vollständig.

Betrachten wir ein anderes Beispiel, bei dem ein Bild vorhanden ist und es beim Klicken auf die Schaltfläche um die x-Achse verschoben wird.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Der Name des Übergangs ist shiftx. Eine Transformationseigenschaft wird verwendet, um das Bild auf der x-Achse mit dem folgenden Code um 100 Pixel zu verschieben.

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
      transform :  translateX(100px);
   }
</style>

Es folgt die Ausgabe.

Durch Klicken auf die Schaltfläche wird das Bild um 100 Pixel nach rechts verschoben, wie im folgenden Screenshot gezeigt.

Animation

Animationen werden genauso angewendet wie der Übergang. Animation hat auch Klassen, die deklariert werden müssen, damit der Effekt stattfinden kann.

Betrachten wir ein Beispiel, um zu sehen, wie Animation funktioniert.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Zum Anwenden von Animationen gibt es Klassen wie beim Übergang. Im obigen Code haben wir ein Bild, das im p-Tag eingeschlossen ist, wie im folgenden Code gezeigt.

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

Der Name des Übergangs ist shiftx. Die angewendete Klasse lautet wie folgt:

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

Der Klasse wird der Übergangsname vorangestellt, dh shiftx-enter-active und .shiftx-Leave-active. Die Animation wird mit den Keyframes von 0% bis 100% definiert. An jedem der Keyframes ist eine Transformation definiert, wie im folgenden Code gezeigt.

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

Es folgt die Ausgabe.

Wenn Sie auf die Schaltfläche klicken, wird sie von 0 auf 360 Grad gedreht und verschwindet.

Benutzerdefinierte Übergangsklassen

VueJS bietet eine Liste benutzerdefinierter Klassen, die dem Übergangselement als Attribute hinzugefügt werden können.

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

Benutzerdefinierte Klassen kommen grundsätzlich ins Spiel, wenn wir eine externe CSS-Bibliothek wie animate.css verwenden möchten.

Beispiel

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Ausgabe

Ausgabe

Ausgabe

Im obigen Code werden zwei Animationen angewendet. Eine enter-active-class = "animierter Swing" und eine andere Leave-active-class = "animiertes BounceIn". Wir verwenden benutzerdefinierte Animationsklassen für die Animation, die aus der Bibliothek eines Drittanbieters angewendet werden soll.

Explizite Übergangsdauer

Wir können mit VueJS Übergang und Animation auf das Element anwenden. Vue wartet darauf, dass das Ereignis transionend und animationend erkennt, ob die Animation oder der Übergang abgeschlossen ist.

Manchmal kann der Übergang zu Verzögerungen führen. In solchen Fällen können wir die Dauer explizit wie folgt anwenden.

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

Wir können die Eigenschaft duration mit einem: auf dem Übergangselement verwenden, wie oben gezeigt. Falls die Dauer für das Betreten und Verlassen separat angegeben werden muss, kann dies wie im obigen Code gezeigt erfolgen.

JavaScript-Hooks

Die Übergangsklassen können mithilfe von JavaScript-Ereignissen als Methoden aufgerufen werden. Betrachten wir ein Beispiel zum besseren Verständnis.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

Ausgabe

Im obigen Beispiel führen wir eine Animation mit js-Methoden für das Übergangselement durch.

Die Methoden beim Übergang werden wie folgt angewendet:

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

Es wurde ein Präfix hinzugefügt v-onund den Namen des Ereignisses, zu dem die Methode aufgerufen wird. Die Methoden werden in der Vue-Instanz wie folgt definiert:

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

Der erforderliche Übergang wird bei jeder dieser Methoden angewendet. Beim Klicken auf die Schaltfläche und auch nach Abschluss der Animation wird eine Deckkraftanimation angewendet. Die Bibliothek eines Drittanbieters wird für die Animation verwendet.

Beim Übergang v-bind wird eine Eigenschaft hinzugefügt: css = "false", damit Vue versteht, dass es sich um einen JavaScript-Übergang handelt.

Übergang beim ersten Rendern

Um zu Beginn eine Animation hinzuzufügen, müssen wir dem Übergangselement die Eigenschaft 'erschein' hinzufügen.

Schauen wir uns ein Beispiel an, um es besser zu verstehen.

Beispiel

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Example</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Im obigen Beispiel haben wir drei verschiedene Animationen aus der Bibliothek animate.css verwendet. Wir haben dem Übergangselement angezeigt.

Bei Ausführung des obigen Codes folgt die Ausgabe im Browser.

Animation zu Komponenten

Wir können den Übergang für die Komponenten mit dem folgenden Code umbrechen. Wir haben hier dynamische Komponenten verwendet.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-
                  size:25;color:red;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Ausgabe

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved