我已经想了一段时间了.在使用它们之前,我很少看到人们可能会考虑的领域:


性能

在第一步中,我发现这question只涉及性能方面的事情.被接受的答案对我来说并不令人满意,因为它表明one should use CSS animations wherever possible so that optimizations like running the animations in separate thread can apply.这似乎不是真的,因为有Angular documentation个州

Angular 动画为built on top of the standard Web Animations API,在支持它的浏览器上本地运行.

(强调我的)

当我们看Web Animations API Draft的时候,我们发现同样的优化可以应用于Web动画,就像应用于工作表中指定的CSS一样.

虽然可以使用ECMAScript通过requestAnimationFrame[HTML]执行动画,但就它们在CSS级联中的表示方式和可能的性能优化(如在单独的线程上执行动画)而言,此类动画的行为与声明性动画不同.Using the Web Animations编程接口,它是来自脚本that have the same behavior and performance characteristics as declarative animationspossible to create animations.

(再次强调我的)

除了像IE这样的一些浏览器不支持网络动画之外,is there any reason to use either CSS declarations over Angular animations or vice versa?我认为它们在性能上是可以互换的.


更好地控制动画

这可能看起来像是Angular 动画的参数,因为您可以对它使用pause animation或使用JS变量,等等,但在使用Eg时也是如此.CSS animation-play-state: pause或使用JS中指定的CSS variables,参见documentation.

现在我可以看到,在JS代码中设置CSS变量可能不太方便,但使用Angular 动画时也是如此.它们通常在@Component-animations字段中声明,并且除了通过动画状态数据绑定属性之外,不具有对实例字段的访问权限(当然,如果您不通过AnimationBuilder创建动画,那么这也不是非常方便或美观).

另一点是,使用Web Animations API可以inspect, debug or test个动画,但我看不出使用Angular 动画怎么可能做到这一点.如果是的话,你能告诉我怎么做吗?如果不是,我真的是don't see any advantage of using Angular animations over CSS ones for the sake of control either岁.


更干净的代码

例如,我读了here个段落,指出将动画与"正常"风格分开实际上是行为和表现的分离.Is really declaring animations in styles sheets mixing those responsibilities?我总是以另一种方式看到这一点,特别是看着@Component个动画中的CSS规则,让我有一种在太多地方有CSS声明的感觉.


那么Angular 动画效果如何呢?

  • 它只是一个从睡觉风格中提取动画的方便实用程序,还是带来了一些有价值的功能方面的东西?
  • Angular 动画的使用是否只在特殊情况下有效,还是团队 Select 一直这样做是一种惯例?

我想在这里谈谈使用Angular 动画的实际优势.谢谢大家!

推荐答案

所以我做了一些研究,虽然我没有发现任何支持或反对Angular 动画性能方面的论据(如上面问题中所述),但对于纯粹主义者来说,这应该足够好了,他们只想在表单中使用CSS,至少在某些情况下是这样.

让我列出一些有用的特性,其中每一个特性都为Angular 动画提供了令人信服的理由.它们中的大多数可以在Angular animations documentation中找到:

  1. Transition styles-这些样式仅在从一种状态过渡到另一种状态期间应用-仅当元素处于动画状态时应用,用户可以这样使用它们:

    transition('stateA => stateB', [style({...}), animate(100)])
    

    仅try 对CSS执行同样的操作可能不会像前一个状态导致下一个状态那样具有表现力.如果动画必须基于初始状态而不同,但结束状态是相同的,那么它可能会非常笨重.

  2. 102状态连同103104个别名(void documentation,:leave and :enter documentation)-Let you animate elements being added or removed from the DOM.

    transition('stateA => void', animate(...))
    

    这是非常酷的,因为之前,虽然添加动画很容易,但移除更复杂,需要触发动画,直到其结束,然后才从DOM中移除元素,所有这些都使用JS.

  3. Automatic property calculation '*'(documentation)-允许执行传统上困难的动画,如height transitions for elements with dynamic height.这个问题需要在元素上设置固定高度(不灵活),使用带有调优过渡函数的max-Height(不完美),或者使用JS查询元素的高度(可能会导致不必要的回流).但现在有了Angular ,就像这样简单:

    trigger('collapsible', [
      state('expanded', style({ height: '*' })),
      state('collapsed', style({ height: '0' })),
      transition('expanded <=> collapsed', animate(100))
    ])
    

    动画平滑且"完整",因为元素的actual高度用于过渡.

  4. Animation callbacks(documentation)-这在CSS动画中是不可能的(如果不是的话,可能会被setTimeout模拟),并且非常方便,例如用于调试.

  5. 与问题it is actually possible to use instance fields as params in Angular animations所述不同,见this question.我发现它比通过DOM API操作CSS变量要容易得多,如图here on MDN所示,更不用说某些浏览器中的有限支持了.

如果您需要上面列出的任何功能,Angular 可能是完成此任务的更好工具.此外,当一个组件中有许多动画要管理时(这只是我个人的看法),我发现以Angular 方式组织动画比在工作表中组织动画更容易,因为在工作表中很难看到它们与各种元素状态之间的关系.

Css相关问答推荐

为什么盒影没有显示在我的Angular组件中?

如何在JavaFX中设置分隔符的样式?

如何在页面顶部创建固定横幅,并在其下方设置滚动条?

两列网格中左列第一个文本正下方的按钮

如何使按钮:之后像按钮:之前一样可见

如何在启动时滚动 div 的底部?

如何使 css 不重复同一个类?

使用任意运行时字符串进行 Tailwind CSS 类定位

子菜单的背景不占用所有空间

CSS动画移动divs upwords

为什么我的 CSS 需要一个它似乎不需要的大括号?

用 svelte 设计 body 元素

使用css水平+垂直翻转/镜像图像

BEM 块、命名和嵌套

为什么无论我做什么都不能改变复选框的 colored颜色 ?

如何在 CSS 中覆盖图像?

调用转发到 JSP 的 Servlet 时,浏览器无法访问/查找相关资源,如 CSS、图像和链接

如何在 React 应用程序中使用 CSS 模块应用全局样式?

CSS关键帧动画CPU占用率高,应该这样吗?

将 -moz-available 和 -webkit-fill-available 放在一个宽度中(CSS 属性)