javascript - 使用 Javascript 动画库 VS 创建要在标题中注入(inject)的动态 <style> 标签

Question

我们正在创建一个复杂的单页应用程序，它允许用户在某些小部件上创建动画，例如小部件按钮可以从左到右动画并在 x 秒内更改其不透明度。另一个小部件也可以影响另一个小部件的动画，在另一个小部件之上制作交易动画。

动画可以由用户定义并由 JavaScript 应用程序以非常复杂的方式触发。动画可以通过多种组合进行编辑，动画的日期是使用 OOP 方法创建的。动画可以恢复、暂停、播放。

关于动画技术，我们目前正在评估两个选项:

01 - 使用 CSS Transition，动态创建必要的 CSS 类并在页面标题中注入(inject)标签。动画将被添加到 dom 中，切换类也将被处理。

02 - 使用 Velocity.js 或 Greensock 等 JS 库，相应地使用 JS 为 DOM 设置动画，因此仅使用内联样式。

03 - Web Animation API(和 CSS Animation)，我们已经尝试过这种方法，但我们发现了一些特定的限制。

我希望得到您的反馈:

方法 01:

• 在程序化控制方面可在 JS 中管理。
• 是否可以在不引起闪烁且不使用复杂的正则表达式的情况下动态编辑标签中的属性？
• 您是否知道在页眉中动态添加标签的任何问题，例如闪烁。
• 当多个动画并行运行时，您是否发现 CSS Transition 性能不足。
• 你知道一些使用这种方法的元素吗？
• 如何控制动画，如反转、停止、暂停。

方法 02:

• 您认为这种方法通常更易于 JS 管理吗？
• 关于此的任何缺点会使选择方法 01 而不是？
• 如何控制动画？

非常欢迎任何反馈。

我读过的一些有用的文章

https://davidwalsh.name/css-js-animation

Answer 1

由于您有复杂的动画可以在执行过程中进行操作，因此请使用 JS 而不是 CSS。您将使用哪个库取决于您。