對Angular中元素的HTML追加動畫

Question

我有一條指令，在用戶單擊按鈕后，將chuck的html附加到DOM中的元素。 在呈現此HTML的動畫時，最好的動畫方法是什么？

enter和leave事件似乎對此不起作用，因為我正在使用element.append(myHtmlChunk);追加element.append(myHtmlChunk);

有任何想法嗎？

Answer 1

由於您不在Angulars正常的DOM操作范圍內，因此無法使用angular的動畫。 如果您想使用它，則可以使用ng-switch或ng-show / hide等代替html來顯示，但是我認為有充分的理由直接插入它。

盡管如此，角度動畫的基本思想仍然存在，僅使用css過渡即可。 插入具有初始類的元素，然后立即將其更新為最終類。 因此，如果您想進行淡入淡出，則可以使用不透明度為0的類來生成該元素，然后立即將其設置為不透明度為1的類。當然也要給該類進行過渡。 然后看着它淡入。