2016-12-15 4 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">