将角度动画添加到引导下拉菜单

我想添加动画到我的角度应用中的下拉菜单的打开和关闭。到目前为止，我可以在下拉菜单中获得开放动画，但对于关闭动画没有任何影响。将角度动画添加到引导下拉菜单

我从引导程序示例中直接导航了导航栏代码，并将其添加到我的页面并进行了一些小修改。导航栏的相关部分是这样的：

<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>

我还使用角度引导太行：

触发角自己的下拉指令。

我注意到只需在内部添加一个类< ul class =“dropdown-menu”... >元素我可以得到一个很好的打开动画。

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

2个问题：

这是正确的 '角' 的方式来添加动画？
动画在下拉列表打开时起作用，但当下拉框关闭时我无法获得任何动画，您如何做到这一点？

This issue看起来非常相似，我所看到的和fix for the issue似乎是很密切的关系我想要的东西。但我真的不明白如何将它应用到关闭下拉动画。

作为一个便笺，但可能相关的是我想使用/我使用animate.css包作为我的css动画的基础。

来源

2014-11-06 lostdorje

刚刚面对同样的问题，花了数周试图做双向淡入淡出动画我想出了棘手的CSS解决方案。几乎做到了，我在角UI莫代尔看了看动画渐变什么，我发现：

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

检查后出来的问题#1465和角文档做了更深入的了解（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; 
}

希望它可以帮助您节省时间。

来源

2015-02-04 16:28:06 animacoma

将角度动画添加到引导下拉菜单

回答

相关问题