一段时间以来，我一直在想为什么我应该使用 Angular 动画而不是 CSS 动画。我看到在使用它们之前可能会考虑的几个方面:
在第一步中我找到了这个 question它只处理事物的性能方面。接受的答案对我来说并不令人满意，因为它声明应该尽可能使用 CSS 动画，以便可以应用优化，例如在单独的线程中运行动画。这似乎不是真的，因为 Angular documentation州
Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.
(强调我的)
当我们查看 Web Animations API Draft 时我们看到，与工作表中指定的 CSS 相同的优化可以应用于 Web 动画。
While it is possible to use ECMAScript to perform animation using requestAnimationFrame [HTML], such animations behave differently to declarative animation in terms of how they are represented in the CSS cascade and the performance optimizations that are possible such as performing the animation on a separate thread. Using the Web Animations programming interface, it is possible to create animations from script that have the same behavior and performance characteristics as declarative animations.
(再次强调我的)
除了 IE 等某些浏览器不支持 Web 动画外，是否有任何理由在 Angular 动画上使用 CSS 声明或反之亦然？我认为它们在性能方面是可交换的。 p>
这可能看起来是 Angular 动画的论据，因为你可以 pause animation或使用 JS 变量等，但使用 eg 时也是如此。 CSS animation-play-state: pause 或使用 JS 中指定的 CSS 变量，参见 documentation .
现在我可以看到在 JS 代码中设置 CSS 变量可能不方便，但在使用 Angular 动画时也是如此。这些通常在 @Component animations 字段中声明，除了通过动画状态数据绑定(bind)属性之外，没有访问实例字段的权限(如果您不创建你的动画当然是通过 AnimationBuilder 实现的，顺便说一句，这也不是很方便也不美观)。
另一点是，使用 Web Animations API 可以 inspect, debug or test动画，但我看不出 Angular 动画是如何实现的。如果是的话，你能告诉我怎么做吗？如果不是，我真的也看不出为了控制而使用 Angular 动画比 CSS 动画有任何优势。
我读过例如 here一段说明将动画与“正常”样式分开实际上是行为和表示的分离。 真的在样式表中声明动画混合了这些职责吗？我总是以另一种方式看待这一点，尤其是查看 @Component 动画中的 CSS 规则让我有一种拥有 CSS 的感觉在太多地方声明。
我很想在这里谈谈使用 Angular 动画的切实优势。先谢谢你们了!
最佳答案
所以我做了一些研究，虽然我没有发现任何支持或反对 Angular 动画性能方面的论据(如上面的问题中所述)，有很好的论据可以在功能方面使用 Angular 动画 对于只想在工作表中使用 CSS 的纯粹主义者来说应该足够好了，至少在某些情况下是这样。
让我列出一些有用的特性，其中每个特性都为 Angular 动画提供了令人信服的案例。其中大部分可以在 Angular animations documentation 中找到:
过渡样式 - 这些样式仅在从一种状态过渡到另一种状态时应用 - 仅在元素正在动画时应用，并且可以像这样使用它们:
transition('stateA => stateB', [style({...}), animate(100)])
尝试只对 CSS 做同样的事情可能无法表达前一个状态导致下一个状态。如果动画必须根据初始状态而不同但最终状态相同，则可能会非常笨拙。
void 状态与 :enter 和 :leave 别名( void documentation , :leave and :enter documentation )- 让您可以为添加到 DOM 中或从中删除的元素设置动画。
transition('stateA => void', animate(...))
这非常酷，因为以前，虽然添加动画很容易，但删除更复杂，需要触发动画，等到它结束，然后才从 DOM 中删除元素，所有这些都使用 JS。
自动属性计算 '*' ( 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))
])
并且动画流畅且“完整”，因为元素的实际高度用于过渡。
Animation callbacks ( documentation ) - 这是 CSS 动画不可能实现的(如果不能用 setTimeout 模拟的话)并且很方便例如。用于调试。
与问题中所述不同，实际上可以在 Angular 动画中使用实例字段作为参数，请参阅 this question .我发现它比通过 DOM API 操作 CSS 变量更容易使用，如图所示 here on MDN ，更不用说某些浏览器的有限支持了。
如果您需要上面列出的任何功能，Angular 可能是完成任务的更好工具。此外，当一个组件中有许多动画需要管理时，这只是我个人的看法，我发现以 Angular 方式组织动画比将它们放在工作表中更容易，后者更难看到它们与各种元素状态之间的关系.
关于javascript - Angular 动画的目的是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49628726/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返
它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput
我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or