將角度動畫添加到引導下拉菜單

我想添加動畫到我的角度應用中的下拉菜單的打開和關閉。到目前爲止，我可以在下拉菜單中獲得開放動畫，但對於關閉動畫沒有任何影響。將角度動畫添加到引導下拉菜單

我從引導程序示例中直接導航了導航欄代碼，並將其添加到我的頁面並進行了一些小修改。導航欄的相關部分是這樣的：

<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

將角度動畫添加到引導下拉菜單

回答

相關問題