Hotwire + Tailwind: Javascript 없이 페이드 인

이 문서에서는 추가 Javascript 없이 로드된 터보 프레임을 페이드 인하는 방법에 대해 설명합니다.

면책 조항 - 설정에는 기술적으로 Javascript인 Tailwind 구성이 포함됩니다.

아이디어 및 설정

때로는 콘텐츠를 터보 프레임에 로드하는 것만으로도 다소 불안정하게 느껴질 수 있습니다. 간단한 페이드 인을 추가하면 기적을 일으키고 앱을 더 부드럽고 빠르게 만들 수 있습니다.

이에 대한 일반적인 접근 방식은 Javascript 애니메이션을 추가하는 것입니다. 다행히 CSS만으로 동일한 효과를 추가할 수 있습니다. 🥳

Tailwind에 CSS 애니메이션 추가

Tailwind의 설정은 매우 간단합니다. 전체 아이디어는 요소의 불투명도를 0%에서 100%로 바꾸는 CSS 애니메이션을 추가하는 것입니다.

// 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 클래스를 요소에 추가하여 사용할 수 있습니다. 💆

터보 프레임에서 페이드 인 사용

페이드를 적용하면 문자 그대로 터보 프레임(또는 그 안의 콘텐츠)에 animate-fade-in 클래스가 추가됩니다.

<turbo-frame id="loadable" class="animate-fade-in">
  <h3 class="uppercase font-semibold">Fading in</h3>
</turbo-frame>

짜잔!

마무리

분명히 이러한 페이드 인은 Hotwire 또는 Tailwind의 컨텍스트 외부에서 사용될 수 있습니다. 그러나 이것은 더 나은 UX를 초대하고 오버헤드를 최소화하는 훌륭한 사용 사례로 보였습니다.


질문이나 제안 사항이 있으면 언제든지 저에게 연락하거나 제 website를 방문하십시오!