Vue.js移行モードが機能していませんか？

Question

現在、スライダコンポーネントを作成中ですが、移行モードが動作していないようです。私が使用している：

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

を私の理解するために、この最初の要素がレンダリングされる前に、それは全体のアニメーションだ完了するために、外出要素を強制する必要があります。

これは私のスライダー・コンポーネントの例です。

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

私は絶対的な画像を重ね合わせることによってそれを修正することができますがそれは明らかに私がすっきり解決策があるかもしれない時にやってみたいものではありません。

遷移CSSは、インデックスページのヘッダーに含まれています

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

誰かが素晴らしいだろう見てみることができれば、私は、できるだけ簡単に使えるし、それを持っています。

Answer 1

別のトランジションが開始する前に完了することが間違っています。単一のtransitionタグ内の要素を変更していたのは当てはまりますが、各要素が独自のtransitionタグでラップされている場合は当てはまりません。

あなたができる最も簡単なことは、を使用して、次のactiveSlideの割り当てをトランジション待ちにすることです。

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); 
     } 
    } 

これには、タイムアウト値とCSSトランジションの長さを同期させておく必要があります。

残業の開始と終了時に、transition hooksを使用してイベントを発生させることが多少なりともあります。

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

（スロットイベントはスロットコンテナに伝播しないので、ないスライダーに）あなたは、トップレベルのコードでハンドラ（holdUpとokGo）で

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

それらをキャッチしますあなたは小道具としてsliderに渡すブール値のデータ項目を設定します。 sliderの場合、nextSlideとprevSlideは、activeSlideの次の値を計算しますが、設定しません。それは、移行が完了したことを小道具が示したときに設定されます。