Vue.js Übergangsmodus nicht funktioniert?

Question

Ich arbeite gerade an einer Slider-Komponente, aber es scheint, dass mein Übergangsmodus nicht funktioniert. Ich habe verwendet:

<transition name="fade" mode="out-in"> 

Zu meinem Verständnis dieses das Element zwingen sollte Ausgehen zum ersten füllen Sie es vor dem Element gesamte Animation ist in gerendert wird.

Dies ist ein Beispiel für meine Slider-Komponente:

https://www.webpackbin.com/bins/-KfMMcLvpUA6LGOFL3vM

ich es durch Überlagerung Bilder absolute beheben konnte, aber das ist natürlich nicht etwas, das ich tun möchte, wenn es eine sauberere Lösung sein könnte.

Der Übergang CSS wird in der Kopfzeile der Index-Seite enthalten:

.fade-enter-active, .fade-leave-active { 
    transition: opacity .5s; 
} 
.fade-enter, .fade-leave-to { 
    opacity: 0; 
} 

Ich habe es bis die so leicht nutzbar wie möglich, wenn jemand einen Blick darauf werfen könnte, die wäre genial.

Answer 1

Ihr Verständnis, dass ein Übergang abgeschlossen wird, bevor ein anderer beginnt, ist falsch. Es könnte wahr sein, wenn Sie ein Element innerhalb eines einzelnen Tags ändern würden, aber es ist nicht wahr, wenn jedes Element in einem eigenen transition-Tag eingeschlossen ist.

Die einfachste Sache, die Sie tun könnten, ist setTimeout verwenden, um die Zuweisung der nächsten activeSlide warten auf den Übergang zu machen.

methods: { 
     prevSlide() { 
      const nextSlide = this.activeSlide === this.firstSlide ? this.lastSlide : this.activeSlide - 1; 
      this.activeSlide = null; 
      setTimeout(() => { 
       this.activeSlide = nextSlide; 
      }, 500); 
     }, 
     nextSlide() { 
      const nextSlide = this.activeSlide === this.lastSlide ? this.firstSlide : this.activeSlide + 1; 
      this.activeSlide = null; 
      setTimeout(() => { 
       this.activeSlide = nextSlide; 
      }, 500); 
     } 
    } 

Das erfordert, dass Ihr Zeitlimitwert und Ihre CSS-Übergangslänge synchron gehalten werden.

Etwas mehr Arbeit würde sein, die transition hooks zu verwenden, um Ereignisse zu emittieren, wenn ein Leave-Übergang gestartet und beendet wurde.

<transition name="fade" mode="out-in" @leave="transitionStarted" @after-leave="transitionComplete"> 

Sie würden sie in der Top-Level-Code, (nicht im Schieber, da sich der Schlitz Ereignisse an den Schlitz Behälter propagieren nicht) fangen

<slide src="http://lorempixel.com/196/196" alt="" @transition-started="holdUp" @transition-complete="okGo"></slide> 

In den Handler (holdUp und okGo) Sie würden ein boolesches Datenelement festlegen, das Sie als Prop an slider übergeben würden. In slider, nextSlide und prevSlide würde berechnen, was der nächste Wert von activeSlide sein wird, aber wird es nicht einstellen. Es würde gesetzt werden, wenn die Requisite anzeigte, dass der Übergang beendet war.