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

标签 javascript jquery css css-transitions velocity

我们正在创建一个复杂的单页应用程序,它允许用户在某些小部件上创建动画,例如小部件按钮可以从左到右动画并在 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

最佳答案

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

关于javascript - 使用 Javascript 动画库 VS 创建要在标题中注入(inject)的动态 <style> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40781233/

相关文章:

javascript - Foundation Zurb 无法更改工具提示文本

javascript - 将Http请求放在js中

javascript - 用于移动设备的 Html 导航栏菜单

html - 将左 Logo 添加到我的导航栏

javascript - 需要修复添加/删除字段行

javascript - 表单信息显示在另一页上

即使使用缩放值,Javascript 金融浮点也会出现错误

Jquery 动画溢出元素在 Safari 中移动

javascript - 谷歌 CDN 中的 jQuery 无法正常工作

html - 如何使上划线文本装饰更长?