动画将 HTML 附加到 Angular 中的元素

Question

我有一个指令，在用户单击按钮后，将一段 html 附加到 DOM 中的元素。在渲染这段 HTML 时，最好的动画方法是什么？

enter 和 leave 事件似乎对此不起作用，因为我正在使用 element.append(myHtmlChunk); 进行附加

有什么想法吗？

Answer 1

Angular 中的动画将不起作用，因为您在 Angulars 正常的 DOM 操作之外。如果你想使用它，你可以使用 ng-switch 或 ng-show/hide 等来显示 html，但我假设有充分的理由直接插入它。

仍然，角度动画的基本思想仍然存在，只需使用 css 过渡。插入具有初始类的元素，然后立即将其更新为最终类。因此，如果您想进行 淡入，那么您将使用一个不透明度为 0 的类生成元素，然后立即将其设置为一个不透明度为 1 的类。并为该类提供一个过渡课程。然后看着它淡入。