将淡入淡出设置为 turbo_stream

Question

Rails UJS 具有紧凑性。在 js.erb 文件的一行中，调用 dom_id，部分 AND 给它一些交互（用极简主义的方法确认对象的变化）。调用 jQuery 库的示例。

$("#header").html("<%= j render 'header', collection: @trecks %>").css({ opacity: 0 }).fadeTo('slow',1);

以删除 UJS 和对 jQuery、
的依赖为目标在 turbo 流上实现 .fadeTo('slow',1) 的 vanilla JS 等效项的最简洁方法是什么？

Answer 1

我通常提出的问题：关注点分离约定...

表现层可以做的事情为什么要用JS做？ CSS.
事实上，jQuery 正在调用 css；直接去！

可以简单地用 class

定义标签

<%= turbo_frame_tag dom_id(@treck), class: 'fade-text' do %>
<% end %>

使用一些简单的 CSS 并获得相同的效果。

.fade-text {
  animation-name: fadeIn;
  animation-duration: 3s;
  transition-timing-function: linear;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

将淡入淡出设置为 turbo_stream

setting a fade to turbo_stream

ruby-on-rails

turbo

ruby-on-rails-7