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)
uj5u.com熱心網友回復：
我通常提出自己的問題：關注點分離的約定......
表現層可以做的事情，為什么還要在 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;}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/421031.html
標籤：
上一篇：簡單的評級系統在ruby??onrails中沒有做任何事情
下一篇：Rails中的兩點運算子是什么？