本文将概述如何在没有额外 Javascript 的情况下淡入加载的 Turbo 帧。
免责声明 – 设置包括技术上是 Javascript 的 Tailwind 配置。
想法和设置
有时只是将内容加载到 Turbo 框架会感觉很生涩。添加一个简单的淡入可以创造奇迹，让应用程序感觉更流畅、更快。
通常的方法是添加 Javascript 动画。幸运的是，只用 CSS 就可以添加相同的效果。 ?
将 CSS 动画添加到 Tailwind
Tailwind 的设置非常简单。整个想法是添加一个 CSS 动画，将元素的不透明度从 0% 变为 100%。
// tailwind.config.js module . exports = { // ... theme : { extend : { animation : { " fade-in " : " fadeIn 0.15s ease-in-out " }, keyframes : () => ({ fadeIn : { " 0% " : { opacity : 0 }, " 100% " : { opacity : 1 } } }) } } }
现在，可以通过向元素添加animate-fade-in类来使用此动画。 ?
在 Turbo Frame 上使用淡入
应用淡入淡出实际上是向涡轮帧（或其中的内容）添加一个animate-fade-in类。
<turbo-frame id= "loadable" class= "animate-fade-in" > <h3 class= "uppercase font-semibold" > Fading in </h3> </turbo-frame>
瞧！
包起来
显然，这种淡入可以在 Hotwire 或 Tailwind 的环境之外使用。然而，这似乎是一个很好的用例，可以带来更好的用户体验并且开销最小。
如果您有任何问题或建议，请随时在Twitter 上与我联系或访问我的网站！
原文： https://dev.to/elvinaspredkelis/hotwire-tailwind-fade-in-without-javascript-16mm