2016-12-15 39 views
0

我有一個動畫離開的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">