告訴ngAnimate只動畫ngShow/ngHide

我有一個AngularJS 1.2.2的網絡應用程序，我基於$scope屬性顯示/隱藏<div>。使用ngAnimate模塊，我製作了<div>的顯示和隱藏動畫。告訴ngAnimate只動畫ngShow/ngHide

<div id="square" ng-show="showSquare" class="animate-shiny"></div>

我也有一類我希望把這個<div>，爲此我使用ngClass。

<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>

，當它恰巧，有時該類被在同一時刻施加時，將顯示/隱藏的<div>。這導致顯示/隱藏動畫不再起作用，顯然它發現ngClass更有趣的動畫，即使我不想使用該動畫ngAnimate。

Here's a Plnkr that demonstrates the behavior。點擊顯示/隱藏按鈕效果很好，單擊make cool按鈕效果很好，但將這兩者結合的按鈕會導致顯示/隱藏動畫中斷。

我該如何解決這個問題？我可以做到這一點，而無需手動尋址$animate？

在此先感謝！

來源

2013-11-28 J.P. ten Berge

問題是，您正在嘗試使用該類進行動畫製作，而不是在應該製作動畫的時候進行區分。也就是說，你的過渡效果通常適用於這個類，ng-animate認爲每當引用該類時都必須進行工作。我修改你的CSS一點得到相當接近，如果不完全，你想要什麼：

#square { 
    width: 50px; 
    height: 50px; 
    background-color: blue; 
    transition: 0.4s all ease-out; 
} 

#square.cool { 
    box-shadow: 0 0 10px 3px green; 
    background-color: lightgreen; 
} 

#square.ng-hide-add, #square.ng-hide-remove 
{ 
    display: block !important; 
} 

#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{ 
    margin-left: -80px; 
    opacity: 0; 
} 

#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{ 
    margin-left: 0; 
    opacity: 1; 
}

這是新plunkr所以你可以用它玩：http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview

如果你只想動畫顯示/隱藏並且不希望顏色轉換，只需將轉換移至#square.ng-hide-add, #square.ng-hide-remove聲明。

來源

2013-12-03 21:09:21 Fourth

這真是太棒了！ – Beyers

請參閱http://docs.angularjs.org/api/ngAnimate上的文檔，「使用」一節，在所列出的指令下說：*「您可以在訪問每個指令頁面時瞭解有關動畫的更多信息。」*那就是你可以找到指令特定的類名來觸發更具體的動畫的地方。 – kontur

儘管這對我很有用，但仍然存在一些奇怪的現象。如果我將動畫放慢到四秒，然後顯示正方形（第一個按鈕），然後應用兩個更改（最後一個按鈕），我看不到動畫效果很酷。我的廣場使用'ng-animate'獲取動畫，但'.cool'類不再適用於動畫。我不確定爲什麼，轉換是正確定義的... –

告訴ngAnimate只動畫ngShow/ngHide

回答

相關問題