добавление угловой анимации в бутстрап выпадающего списка

Question

Я хочу добавить анимацию к открытию и закрытию выпадающего списка в моем угловом приложении. Пока я могу открыть открытые анимации, работающие над выпадающим списком, но ничего для близких анимаций.

Я взял код навигатора прямо из примера начальной загрузки и добавил его на свою страницу с некоторыми незначительными изменениями. Соответствующая часть навигационной панели заключается в следующей:

<ul class="nav navbar-nav navbar-right"> 
    <li ng-if="isAuthenticated()" class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ authenticatedUser.displayName }} <span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li ng-if="menuItem.show()" ng-repeat="menuItem in menuItems" ng-class="{active: menuItem.active, disabled: menuItem.disabled}"> 
     <a ui-sref="{{ menuItem.state }}({{ menuItem.stateParams }})">{{ menuItem.heading }}</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

Я также использую угловой загрузчик линии:

запускает собственную директиву угловой-х Dropdown.

Я заметил, просто добавив класс во внутренний < ul class = "dropdown-menu" ... > элемент Я мог бы получить приятную открытую анимацию.

<ul class="dropdown-menu my-cool-opening-animation" role="menu"> 

2 вопроса:

1. Является ли это правильный 'Угловой' способом добавить анимацию?
2. Анимация работает, когда раскрывающийся список открывается, но я не могу получить анимацию, когда раскрывающийся список закрывается, как вы это делаете?

This issue выглядит очень похоже на то, что я вижу и fix for the issue, кажется, очень тесно связано с тем, что я хочу. Но я действительно не понимаю, как применить его, чтобы анимация в раскрывающемся списке закрылась.

В качестве побочного примечания, но, возможно, релевантно, я хотел бы использовать/am используя пакет animate.css в качестве базы для анимации css.

Answer 1

Только что столкнулся с той же проблемой и провел недели, пытаясь сделать двухстороннюю анимацию затухания. Я придумал сложное CSS-решение. Почти готовы, я посмотрел на Fade анимации в радиально-UI модального и что я нашел:

<div class="modal fade in" ng-class="{in: animate}">modal content</div> 

После Выдан вопрос #1465 и сделал глубокий взгляд на угловом Docs (addClass/removeClass метода) Я перенес это радиально-UI раскрывающегося и что я получил до сих пор: http://plnkr.co/edit/KO41KkAFnCog3Vfl08Uf?p=preview

Вот последнюю версия моего CSS:

.dropdown.ng-animate-start { 
    border-spacing: 0; 
} 

.open-add > .dropdown-menu, 
.open-remove > .dropdown-menu { 
    display: block !important; 
} 

.open-add > .dropdown-menu { 
    opacity: 0; 

    -webkit-transition: opacity .3s ease-in; 
    -moz-transition: opacity .3s ease-in; 
    -ms-transition: opacity .3s ease-in; 
    -o-transition: opacity .3s ease-in; 
    transition: opacity .3s ease-in; 
} 

.open-add.open-add-active > .dropdown-menu { 
    opacity: 1; 
} 

.open-remove > .dropdown-menu { 
    opacity: 1; 

    -webkit-transition: opacity .3s ease-out; 
    -moz-transition: opacity .3s ease-out; 
    -ms-transition: opacity .3s ease-out; 
    -o-transition: opacity .3s ease-out; 
    transition: opacity .3s ease-out; 
} 

.open-remove.open-remove-active > .dropdown-menu { 
    opacity: 0; 
} 

Надеется, что это помогает сэкономить время.