2016-12-15 10 views
0

Divには休暇中にアニメーションが表示されますが、入力には入りません。具体的には、フェードアニメーションは両方の方法で動作しますが、高さアニメーションは終了時にのみ機能します。Divアニメーションはありません

<transition v-on:enter="slideDown" v-on:leave="slideUp"> 
    <div v-show="!showForm" class="container-fluid"> 

とjQuery:

slideDown(el, done) { $(el).slideDown().animate({ opacity: 1 },{ duration: 250 }); }, 
slideUp(el, done) { $(el).animate({ opacity: 0 }, { duration: 250 }).slideUp(); }, 
+0

ほとんどのときに 'ので、 .slideDown'の不透明度は0なので、それは滑り落ちていますが、見ることはできません。呼び出しを同じ順序で入れないでください: '.animate.slideUp' so' .animate.slideDown'。または、fadeIn()を使用してください。 –

+0

@ freedomn-m '.slideDown'はまったく呼び出されていません。 '$(el).slideDown();'に変更しても何も起こりません。移行はありません。 – daninthemix

+0

デモスニペット/フィドルを作成できますか? –

答えて

0

まあ、私はちょうどディスプレイを持っているdiv要素を必要と判明:アニメーションが始まる前に何も設定されていない:

beforeEnter(el){ 
     $(el).css('display',"none"); 
     $(el).css('opacity', 0); 
    }, 

<transition v-on:before-enter="beforeEnter" v-on:enter="slideDown" v-on:leave="slideUp"> 
関連する問題