Vue遷移：v-on：コールバックが実行される前にbefore-leave hides要素が実行されます

Question

私はVueを学習しており、これについて非常に混乱しています。

jQueryのslideToggle()を複製しようとしています。

私は項目のリストを持っていますが、それぞれ見出しと本文があります。

最初は各リスト項目の本文が非表示になっています。ユーザーがタイトルをクリックすると、スライドの移行が行われます。

各リスト項目のボディーは可変な高さなので、CSSはheight: autoのトランジションを正しく実行できないため、JSでこれを行う必要があります。 （でもmax-height。smoothから遠いので

私はVelocity.jsライブラリを使用していますし、slideDownは完璧です。（私は思うので、実行することはできませんslideUp）Vueのは、すでに要素が隠されています。ここだ

（簡略化）テンプレート：

<ul class="list-group"> 
    <li class="list-group-item" v-for="word in saved_definitions"> 
     <h3 @click="word.show = !word.show"> 
      {{ word.word }} 
     </h3> 
     <transition v-on:before-enter="slide_down" v-on:before-leave="slide_up" :css="false"> 
      <div v-show="word.show"> 
       {{ word.definition }} 
      </div> 
     </transition> 
    </li> 
</ul> 

saved_definitions{word: '', definition: '', show: true}オブジェクトの配列であり、ここで

が関連方法である：。

slide_down: function(el) { 
    Velocity(el, 'slideDown', 'fast'); 
}, 

slide_up: function(el) { 
    console.log(el); 
    Velocity(el, 'slideUp', 'fast'); 
} 

slide_down()は完全に動作しています。

slide_up()は機能しません。定義が変わらずに消えます。 console.log()は、VelocityがslideUpを実行する前に、要素がdisplay: noneであることを示しています。

jsFiddleはここにあります：https://jsfiddle.net/zmoc2v3n/ - あなたはslideDownが滑らかであることがわかります、slideUpは動作しません。

私はleaveフックとafter-leaveフックを試しましたが、これは役に立たないものです。

v-ifを使用すると、最初にレンダリングされた要素が表示されてから非表示になり、次にslideDownが発生します。私はまだbefore-leaveと同じ問題を即座に隠している。

ご協力いただきありがとうございます。

Answer 1

私はVue Forumでこの質問をしました。私は答えをここに掲載したいと思っていました。

彼らはあなたがあなたのアニメーションが終了したとき ヴューに知らせることを可能として、代わりに出入りするイベントを使用してみてください。 JSで

<transition @enter="slide_down" @leave="slide_up"></transition> 

：

function slide_down(el, done) { 
    Velocity(el, 'slideDown', { 
     duration: 'fast', 
     complete: done 
    }) 
} 

function slide_up(el, done) { 
    Velocity(el, 'slideUp', { 
     duration: 'fast', 
     complete: done 
    }) 
} 

は私の問題は、より多くの速度でのVueよりだったが判明。

Here is the working jsfiddle.