Я собираюсь перейти к переходу CSS-переходов с помощью Vuejs. Сейчас я создаю базовую мобильную навигацию. Это мой код до сих пор:Адаптация перехода Vuejs не работает в отпуске
http://jsfiddle.net/67dcnd7a/1/
Мой HTML:
<nav>
<div id="nav-btn" v-on="click: isVisible = !isVisible">
NAVIGATION
<span class="pull-right"><i class="fa fa-bars"></i></span>
</div>
<ul v-show="isVisible" v-transition="slide">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Explore">Explore</a>
<ul>
<li><a href="#" title="Adventure">Adventure</a></li>
<li><a href="#" title="Main Region">Main Region</a></li>
<li><a href="#" title="The Exchange">The Exchange</a></li>
</ul>
</li>
</ul>
<pre>
{{ $data | json }}
</pre>
</nav>
Мой переход CSS (остальное можно увидеть на скрипке по умолчанию стиль):
.slide-transition {
transition: all .5s ease-in-out;
height: auto;
overflow-y: hidden;
}
.slide-enter, .slide-leave {
transition: all .5s ease-in-out;
height: 0;
opacity: 0;
}
Затем мой Javascript с моим экземпляром Vue:
var $j = jQuery.noConflict();
// Navigation instance
new Vue({
el: 'nav',
data: {
isVisible: false
},
methods: {
}
});
Он скользит вниз очень хорошо, но сползает вверх, он очень быстро встряхивает. Он не делает это плавно. Когда я снимаю непрозрачность, это выглядит еще хуже. Правила опускания CSS, похоже, не применяются, но они применяются при вводе. Я предпочитаю использовать непрозрачность, потому что это похоже на увядание. Я хочу, чтобы он SLIDE вниз, а затем SLIDE назад .. не имеют никаких эффектов затухания. Я следил за их документацией здесь: http://vuejs.org/guide/transitions.html, но не мог получить эффект, который они имели в своем первом примере.
Спасибо за любую помощь.