使用 Javascript 动画库 VS 动态创建 <style> 标签以注入 header

Question

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

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

关于我们正在评估的动画技术，目前有两个选择：

01 - 使用 CSS 转换，动态创建必要的 CSS 类并在页面的 header 中注入标签。动画将添加到 dom 并且切换类将被处理。

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

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

我希望得到您的反馈：

方法 01：

在编程控制方面在 JS 中是可管理的。
是否可以动态编辑标签中的属性而不会导致闪烁且不使用复杂的正则表达式？
您是否知道在 Header 中动态添加标签的任何问题，例如闪烁。
你有没有发现CSS当多个动画运行并行时过渡性能不足
你知道一些使用这种方法的项目吗？
如何控制动画，如反转、停止、暂停。

方法 02：

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

非常欢迎任何反馈。

我读了一些有用的文章

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

Answer 1

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

Answer 2

使用 JS 库的问题是您必须同时调试硬件动画和 JS 动画。最重要的是，您还必须了解这些库中的所有怪癖。在过去的 3 年里，我发现 CSS 动画和过渡更简单，因此更好，因为调试更简单。调试是网络动画的关键。

话虽如此，有大量现成的助手（如果您愿意，也可以是库）可以更轻松地处理更复杂的 CSS 动画和过渡。如果我是你，我会先检查现有的库，看看它们是否满足你的要求。

这是两个使用 CSS 动画的小库：
https://github.com/FelixRilling/microAnimate
https://github.com/daniel-lundin/snabbt.js

其中许多支持您以您描述的方式保存用户动画。

来自 microAnimate 的示例：

var myAdvancedAnimation = new Anim(
  document.getElementById("square"), {
    "0%": [
      ["width", "200px"],
      ["color", "transparent"]
    ],
    "20%": [
      ["width", "100px"],
      ["color", "#fff"],
      function() {
        console.log("callback 2");
      }
    ],
    "100%": [
      ["width", "60px"],
      ["color", "red"],
      function() {
        console.log("callback 3");
      }
    ]
  }, {
    duration: 2000,
    ticklength: 30,
    ease: true,
    retainEndState: true,
    loop: false
  }
);

如您所见，让用户保存特定动画是微不足道的，因为它只是可以保存到用户本地存储或中央数据库的对象和数组。让 animationType A 影响 animationType B.

也会变得简单

使用 Javascript 动画库 VS 动态创建 <style> 标签以注入 header

Using Javascript animation library VS creating dynamically <style> tags to be injected in the header

javascript

css

jquery

velocity

css-transitions