터보 스트림을 통한 원활한 전환

이 기사는 원래 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

다음은 터보: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")
}

와! 이거 무서운 것 같아! 정말 나쁘지 않아요! 이는 터보:before-stream-render 이벤트를 가로채서 특정 전환 속성(예: data-transition-start)에 대한 대상 요소의 데이터세트를 확인합니다. 요소를 입력하려면 요소를 숨김으로 설정하고 표시 데이터 컨트롤러를 추가합니다. 요소를 남기기 위해 사라지는 데이터 컨트롤러

를 추가합니다.

? Ruby on Rails 개발자로서 JavaScript를 더 편안하게 작성하고 이해하고 싶으십니까? Rails 개발자를 위한 JavaScript 책을 확인해 보세요

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()
    })
  }
}

이제 모든 과정을 마치고 터보 스트림을 사용하여 추가되거나 제거된 요소에 부드러운 전환을 추가할 수 있습니다.

일부 데이터 속성(data: {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"} %>

위 내용은 터보 스트림을 통한 원활한 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!