帶增量「左」的AngularJS動畫

Question

我想實現以下功能：當點擊一個按鈕時，同一個控制器下的另一個div向右移動一點（左+ = 50）。但是，當我搜索ngAnimate並發現它主要是CSS中的「開始」和「結束」狀態，而不是增量操作。 （我是Angular的新手）。我現在不得不使用jquery動畫來移動。

1. 我得到$($element)從控制器
2. 找到我想要移動的DIV，說var toMove = $($element).find(".tomove")
3. toMove.animate({left:"+=50}, 200);

我想知道是否有在角一個優雅的方式來實現這一目標？

Answer 1

Angular並沒有真正提供很多DOM操作的方法，如果使用CSS3動畫無法達到預期的效果，那麼使用jQuery可能是您最好的選擇。任何時候你在做DOM操作時都應該將它封裝在一個指令中，但除此之外，Angular沒有什麼特別的東西可以與DOM一起工作，無論瀏覽器/ jQuery提供什麼。

Answer 2

如果您不需要訪問「完成」回調，並且只需要支持支持的瀏覽器，那麼只需要CSS3轉換即可。所以

.my-el {transition: left 0.5s ... 

然後在指令中設置left值動態點擊。 CSS將動畫爲當前值。

如果您希望Angular在轉換完成時計算併爲您提供使用「完成」回調的能力，那麼我發現的唯一方法是將動態生成的樣式表添加到頁面中，該表格包含與目標left值相匹配的唯一類，並使用$ animate.addClass添加它。雖然感覺有點囉嗦，但我不能很好地推薦它，並且會喜歡更好的方式！