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

Question

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

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

有任何想法吗？

Answer 1

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

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