Heim > Artikel > Web-Frontend > vue.js steuert die Animationsimplementierung

vue.js steuert die Animationsimplementierung

巴扎黑Original: 2017-07-23 15:02:551899Durchsuche

Das letzte Mal haben wir die Verwendung von Vue zur Implementierung der Übergangsanimation erwähnt. Tatsächlich haben wir nur über einen Teil der Vue-Animation gesprochen. Sie wurde mithilfe der eigenen CSS-Statuskontrollanimation ohne JS implementiert.

In Vue gibt es eine andere Möglichkeit, die Implementierung von Animationen zu steuern, nämlich die Verwendung von js zur Steuerung des Animationsstatus

sind jeweils die folgenden 3 Zustände

:before-enter="name" bevor die Animation

:enter="name" Nachdem die Animation eintritt

:leave="name" Nachdem die Animation eingegeben wurde

Sehen wir uns das folgende Beispiel an

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="http://tool.oschina.net/js/jquery/jquery-1.7.2.js?1.1.11"></script><script src="https://unpkg.com/vue/dist/vue.js?1.1.11"></script></head><style>#app{position: relative;width: 100%;height: 30px;}.animate-p{position: absolute;top: 0px;left: 0px;}</style><body><div id="app"><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"><span class="animate-p" v-show="show">快看啦</span></transition><br> <button @click="show =! show">toggle</button></div>
 </body></html>

HTML-Teil, wegen der Animation Zur Steuerung habe ich die Animationsfunktion von jquery verwendet. Wenn Sie in Zukunft Dinge mit Vue erstellen, versuchen Sie, so sauber wie möglich zu sein. Verwenden Sie bei der Verwendung von Vue nicht

Oben haben wir den in Vue integrierten Animationskomponentenübergang verwendet und die Animation an 3 Zustände gebunden

v-on:before-enter=" beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind :css="false"

Es ist immer noch das gleiche Bild wie beim letzten Mal, vor dem Betreten, während des Betretens, nach dem Betreten

Jetzt fangen wir an, den zu steuernden js-Teil zu schreiben

new Vue({
　　        el:'#app',
        data:{
            show:true},
        methods: {//进入之前beforeEnter: function(el){
            $(el).css({
                left:"-500px",
                opacity:0})
        },//进入中enter: function(el,done){
            $(el).stop().animate({
                left:0,
                opacity:1},{
                duration:1500,
                complete:done
            },5000)
        },//结束leave: function(el,done){
            $(el).stop().animate({
                left:"500px",
                opacity:0},{
                duration:1500,
                complete:done
            },5000)
        }    
    }
    });

Es ist in Ordnung, wenn wir drei Animationszuständen entsprechen, ist das nicht sehr einfach?

 <br>

Das obige ist der detaillierte Inhalt vonvue.js steuert die Animationsimplementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Technische Erklärung der Bootstrap-ModalboxNächster Artikel：Technische Erklärung der Bootstrap-Modalbox

In Verbindung stehende Artikel

Mehr sehen