本文最初发表于 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中文网其他相关文章！
