Dan*_*cák 48 javascript css animation angular angular-animations
我一直想知道为什么我应该使用Angular动画而不是CSS动画.我发现在使用它们之前可能会考虑的几个方面:
在第一步中,我发现这个问题只涉及性能方面.接受的答案对我来说并不令人满意,因为它声明应尽可能使用CSS动画,以便在单独的线程中运行动画的优化可以应用.这似乎不正确,因为Angular文档说明了这一点
角度动画构建于标准Web动画API之上,并在支持它的浏览器上本机运行.
(强调我的)
当我们查看Web Animations API Draft时,我们发现相同的优化可以应用于Web动画,而不是在工作表中指定的CSS.
虽然可以使用ECMAScript使用requestAnimationFrame [HTML]执行动画,但这些动画在声明动画方面的表现方式与它们在CSS级联中的表示方式以及可能的性能优化(例如在单独的线程上执行动画)有所不同.使用Web Animations编程接口,可以从脚本创建具有与声明性动画相同的行为和性能特征的动画.
(再次强调我的)
除了像IE这样的浏览器不支持Web动画,有没有理由使用CSS声明而不是Angular动画,反之亦然？我认为它们是可交换的性能.
这可能看起来像Angular动画的一个参数,因为你可以暂停动画或使用它等JS变量,但使用eg时也是如此.CSS animation-play-state: pause或使用JS中指定的CSS变量,请参阅文档.
现在我可以看到在JS代码中设置CSS变量可能不方便,但使用Angular动画时也是如此.这些通常在@Component animations字段中声明并且没有,除了通过动画状态数据绑定属性,访问实例字段(如果你AnimationBuilder当然不通过创建动画,btw也不是很方便或漂亮) .
另一点是,使用Web Animations API可以检查,调试或测试动画,但我不知道Angular动画是如何实现的.如果是的话,请你告诉我怎么样？如果不是这样的话,为了控制,我真的没有看到使用Angular动画而不是CSS的优势.
我在这里阅读了一个段落,说明将动画与"普通"样式分开实际上是行为和表现的分离.真的在样式表中声明动画混合了这些责任吗？我总是以另一种方式看到它,特别是在@Component动画中查看CSS规则让我感觉在一个太多的地方都有CSS声明.
我很想知道使用Angular动画的实际优势.先谢谢你们!
Dan*_*cák 43
所以我做了一些研究,虽然我没有找到任何关于Angular动画的论证,但是在上面的问题中已经说过了,所以有很好的论据可以使用Angular动画特征,这应该足够好了.希望只在表格中使用CSS的纯粹主义者,至少在某些情况下我将在下面说明.
让我列出一些有用的功能,每个功能都可以为Angular动画制作一个令人信服的案例,其中大部分都可以在Angular动画文档中找到:
过渡样式 - 这些样式仅在从一个状态转换到另一个状态期间应用 - 仅在元素被动画化时,并且使用它们如下:
transition('stateA => stateB', [style({...}), animate(100)])
尝试在没有Angular的情况下执行相同操作将需要"stateB"样式中的CSS动画,其持续时间与转换相同或暂时分配临时样式,并在动画持续时间之后通过JS删除它们.
该void状态(文档) - 让您的动画添加或从DOM删除的元素的.
transition('stateA => void', animate(...))
这非常酷,因为之前虽然很容易为添加设置动画,但删除操作更加复杂,需要触发动画,等到结束,只有在从DOM中删除元素后才能使用JS.
自动属性计算 '*'(文档) - 允许执行传统上困难的动画,例如具有动态高度的元素的高度过渡.这个问题特别困扰CSS纯粹主义者,并要求JS检查元素的当前高度,为其执行精确的高度和其他过程以执行完美的动画.但是现在使用Angular它就像这样简单:
trigger('collapsible', [
state('expanded', style({ height: '*' })),
state('collapsed', style({ height: '0' })),
transition('expanded <=> collapsed', animate(100))
])
并且动画是平滑的,因为元素的实际高度用于过渡,而不像普遍的max-height解决方案.
动画回调(文档) - 这是CSS动画不可能完成的事情(如果不能模拟setTimeout),并且很方便.用于调试.
与问题中所述不同,实际上可以在Angular动画中使用实例字段作为参数,请参阅此问题.我觉得使用它比通过DOM API操作CSS变量要容易得多,如MDN所示.
很明显,如果您需要上面列出的功能之一,Angular就是您的选择.此外,当组件中有许多动画需要管理时,这只是我个人的意见,我发现以Angular方式组织动画比在表单中组织动画更容易,在这些组件中,更难以看到各种元素状态之间的关系.