ruby-on-rails - 将淡入淡出设置为 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 流上的
vanilla JS 中实现等价物的最简洁的方法是什么？.fadeTo('slow',1)

Answer 1

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

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

可以简单地用一个类定义标签

<%= 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;}
}