如何向 Hotwire 的 Turbo Streams 添加动画 | Ed Forshaw

主要观点:Hotwire 虽未提供开箱即用的动画,但提供了添加自身动画的钩子,通过 Turbo Streams 可在 Rails 应用中添加简单动画。
关键信息:

  • 可通过turbo:before-stream-render事件添加动画类,在元素即将添加或移除时应用。
  • 示例展示了在 Rails 应用中为购物车面板、添加/移除的票券以及总价格添加不同动画的方法,包括定义动画类和相关的部分视图及 CSS 样式。
    重要细节:
  • 在 JavaScript 片段中通过event.target等获取元素并添加动画类。
  • 在不同的部分视图中指定data-stream-enter-classdata-stream-exit-class
  • 在 CSS 中定义各种动画效果,如淡入淡出、滑动等。
  • 对于总价格的动画,通过传递direction变量来设置不同的动画类。
  • 2021 年 10 月的编辑中提到 Turbo 的更改导致之前的代码片段不再工作,已进行更新。最后邀请提问和提供建议。
阅读 15
0 条评论