通过 Turbo Streams 实现平滑过渡

本文最初发表于 Rails Designer

---

使用 Turbo Streams，您可以更新应用程序的特定部分。插入聊天消息、更新个人资料图片或插入正在创建报告警报。

Turbo Streams 提供的精确性非常好。但往往它的唐突，对我来说不太有吸引力。新组件就在那里（或者如果您将其删除，则不存在）。

我想为我的应用程序添加更多乐趣，而这项技术正是可以做到这一点。我之前探索了多种技术来在插入或删除元素时添加某种过渡或动画。多年来我在生产中使用它时对其进行了微调。我可以说我对我今天概述的技术的工作原理感到满意。

首先，这将是最终结果：

使用方法如下：

<%= turbo_stream_action_tag_with_block "prepend", target: "resources", data: {transition_enter: "transition ease-in duration-300", transition_enter_start: "opacity-0", transition_enter_end: "opacity-100"} do %>
  <%= render ResourceComponent.new(resource: @resource) %>
<% end %>

如果您正在使用 Rails Designer 它已包含，可供您使用。赢了！ ？

这里有相当多的移动元素来让它运行，但从上面的代码示例中可以看出，用法非常干净且可定制。

让我们开始吧。

第一步是创建turbo_stream_action_tag_with_block 帮助器。这是必需的，因为可用的 Turbo_stream_action_tag 帮助程序不允许传递块（例如渲染 CollectionComponent），并且默认的 Turbo 流 Rails 帮助程序不会传递数据属性。不过这很简单：

# app/helpers/turbo_stream_helper.rb
module TurboStreamHelper
  def turbo_stream_action_tag_with_block(action, target: nil, targets: nil, **options, &block)
    template_content = block_given? ? capture(&block) : nil

    turbo_stream_action_tag(action, target: target, targets: targets, template: template_content, **options)
  end
end

下一步是为 Turbo:before-stream-render 添加监听器并添加一些自定义行为。

// app/javascript/utilities/turbo_stream_render.js
document.addEventListener("turbo:before-stream-render", (event) => {
  const { target } = event

  if (!(target.firstElementChild instanceof HTMLTemplateElement)) return

  const { dataset, templateElement } = target
  const { transitionEnter, transitionLeave } = dataset

  if (transitionEnter !== undefined) {
    transitionEnter(event, templateElement, dataset)
  }

  if (transitionLeave !== undefined) {
    handleTransitionLeave(event, target, dataset)
  }
})

const handleTransitionEnter = (event, templateElement, dataset) => {
  event.preventDefault()

  const firstChild = templateElement.content.firstElementChild

  Object.assign(firstChild.dataset, dataset)

  firstChild.setAttribute("hidden", "")
  firstChild.setAttribute("data-controller", "appear")

  event.target.performAction()
}

const handleTransitionLeave = (event, target, dataset) => {
  const leaveElement = document.getElementById(target.target)
  if (!leaveElement) return

  event.preventDefault()

  Object.assign(leaveElement.dataset, dataset)

  leaveElement.setAttribute("data-controller", "disappear")
}

哇！这看起来很吓人！真的还不错！它拦截turbo:before-stream-render事件，检查目标元素的数据集的特定转换属性（例如data-transition-start）。对于输入元素，它将它们设置为隐藏并添加一个 appear 数据控制器。为了离开元素，它添加了一个消失数据控制器。

？想要作为 Ruby on Rails 开发人员更轻松地编写和理解 JavaScript？查看《JavaScript for Rails 开发人员》一书

确保将其导入到您的application.js。

 // app/javascript/application.js
 import "@hotwired/turbo-rails"
 import "./controllers"
 import "./utilities/turbo_stream_render.js"

 // …

现在让我们创建这两个控制器。它们非常简单，并且依赖于很酷的 el-transition 库。确保将其添加到您的应用中（通过 NPM 或 importmaps）。

// app/javascript/controllers/appear_controller.js
import ApplicationController from "./application_controller"
import { enter } from "el-transtion"

export default class extends ApplicationController {
  connect() {
    enter(this.element)
  }
}

// app/javascript/controllers/disappear_controller.js
import ApplicationController from "./application_controller"
import { leave } from "el-transtion"

export default class extends ApplicationController {
  connect() {
    leave(this.element).then(() => {
      this.element.remove()
    })
  }
}

完成这一切后，您现在可以使用涡轮流为任何添加或删除的元素添加平滑过渡。

只需将一些数据属性（数据：{transition_enter: ""}）附加到涡轮流中即可享受流畅的旅程。

您可以使用 el-transition 支持的相同数据属性：

• 数据转换输入；
• 数据转换-输入-开始；
• 数据转换-进入结束；
• 数据转换离开；
• 数据转换-离开-开始；
• 数据转换离开结束。

用于添加元素：

<%= turbo_stream_action_tag_with_block "prepend", target: "resources", data: {transition_enter: "transition ease-in duration-300", transition_enter_start: "opacity-0", transition_enter_end: "opacity-100"} do %>
  <%= render ResourceComponent.new(resource: @resource) %>
<% end %>

删除元素：

<%= turbo_stream_action_tag_with_block "remove", target: dom_id(@resource), data: {transition_leave: "transition ease-in duration-300", transition_leave_start: "opacity-100", transition_leave_end: "opacity-0"} %>

以上是通过 Turbo Streams 实现平滑过渡的详细内容。更多信息请关注PHP中文网其他相关文章！