トランジションによって移動されるトランジション要素ですか？

Question

Vueのトランジションは本当に素晴らしいですが、何かがフェードアウトした後にDOMが再調整されると、問題が発生します。だから、トランジションのあるものはフェードイン/フェードアウトしますが、その後はすべての周囲の要素が合成された空間に入り込みます。

人々はこれにどのように対処しますか？

Answer 1

これは達成しようとしている効果によって異なります。フェードアウトしたい場合は、他のページ要素をスライドして置き、標準のフェードトランジションではなく、JavaScriptアニメーションを使用したいと思うかもしれません。この効果は、jQueryやvelocityのようなものを使用して、かなり単純です。あなたのHTMLにあなたが持っているので、あなたがする必要があるすべては、あなたのビューモデルに2つのメソッドを作成し、v-on:enterとv-on:leaveを使用してそれらを結合している：

<transition v-on:enter="slideFadeIn" v-on:leave="fadeSlideOut"> 
    <div v-show="show"> 
     // Fadeable content 
    </div> 
    </transition> 

を次に、あなただけのこれらの二つの方法（slideFadeInとfadeSlideOut）を作成する必要がありますので（私はここでは速度を使用しています）のように、それをスライドさせ、その後要素をフェードアウト：

methods: { 
    slideFadeIn(el, done) { 
     $(el).velocity('slideDown', 200).velocity({ 
     opacity: 1 
     }, { 
     complete: done 
     }); 
    }, 
    fadeSlideOut(el, done) { 
     $(el).velocity({ 
      opacity: 0, 
     }, { duration: 1500 }).velocity('slideUp', 200, { 
      complete: done 
     }); 
     } 
    }, 

その後、あなたは要素を表示し、非表示にする切り替えることができますdataで旗を持っていることを確認してください。

ここで

は、全体の事のためにJSFiddleです：もちろんhttps://jsfiddle.net/9dt4z4c6/

、あなたはほとんどあなたがしたいアニメーションのいずれかのタイプを行うには、これを調整することができ、ここでは同時にフェードやスライドフィドルです：

https://jsfiddle.net/rd9mqs6n/

あなたのその効果のような場合、あなたはまた、それが少し滑らかな印象である通常の変遷を、使用して行うことができ、けれども：

https://jsfiddle.net/43zL2cw3/