動畫效果ngView內容順序，而不是同時

根據角1.2 ngView文檔「的進入和離開動畫同時發生」，所以ngView更新過程的時間推移推移像動畫效果ngView內容順序，而不是同時

添加新內容>動畫進入/離開一個>刪除舊內容

有沒有辦法如何順序，而不是同時 - 首先刪除舊的，然後添加新的？

動畫留下一個>刪除舊的內容>添加新內容>動畫在這裏輸入一個

我的意思是，我的加入（進入）內容Ctrl爲射擊了另一事件/動畫和以前的ngView的內容正在干擾他們。或者在輸入/完成動畫完成後（從控制器的範圍）如何觸發事件？

來源

2014-01-14 Greegus

當動畫啓動時，您無法將新舊內容同時置於DOM樹中。您可能需要找到一種替代方法。不過，我認爲你可以實現類似這樣的內容：添加新內容>動畫留下一個>刪除舊內容>動畫輸入一個內容。 – Daiwei

嗯，我發現所有我需要的是聽一個「animationend」事件，但是在視圖的輸入內容中是否有一些默認的有角度的方式來捕捉它？我認爲應該可以通過擴展ngView指令來實現，但是... – Greegus

角度檢測動畫結束有一些方法。如果您使用CSS轉換，您可以在動畫元素上監聽「TransitionEnd」事件（請注意供應商前綴）。如果你使用JS動畫，你可以在'app.animation（）'模塊中返回一個'function'。如果聽起來像你想要的，我可以在下面詳細發表答案。或者你可以向你提出另一個問題新的要求。 – Daiwei

在大多數情況下，CSS3屬性animation-delay應該可以解決此問題。只是延遲動畫中的淡化。

如果動畫比較複雜，你也可以考慮使用CSS @keyframes。

來源

2014-01-14 00:20:46 TheHippo

謝謝，這可能是有用的，但正如我所提到的，它不僅關於動畫，還有其他腳本由控制器觸發，需要等待動畫停止。是的，我可以通過一些超時來包裝它們，但不是，這對於未來的變化來說是一種討厭和不可維護的方式。 – Greegus

我可以成像。我認爲Angular動畫組件背後的想法是，要與Angular中的舊方法兼容，並且如果瀏覽器不支持動畫，切換元素時不會有延遲。 – TheHippo

動畫效果ngView內容順序，而不是同時

回答

相關問題