2022.10.17 Railsの技: TailwindスタイルのCSSトランジションをStimulusJSで行う(翻訳) StimulusJSでUI要素をビルドしたことがあるなら、きっとページ上の要素の表示・非表示を切り替えるコードを書いたことがあるでしょう。これまでの私たちは、モーダルダイアログを表示するときやパネルをスライドさせるときに以下のようなコントローラコードをひとつ覚えで書いていたものです。 this.modalTarget.classList.remove("hidden") UIデザインをレベルアップさせる目的で、トランジション(transition)1で画面上の要素の表示・非表示を滑らかに切り替える方法が使えます。トランジションを使うと、不透明な要素をじわじわ透明にしたり、要素を表示位置にスライドインしたりできるようになります。 CSSのtransitionプロパティで
![Railsの技: TailwindスタイルのCSSトランジションをStimulusJSで行う(翻訳)|TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/45173af84a4396aac95e764e06f9b961ae1b2b54/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2022%2F08%2Frails_stimulus_tailwind_css_transition_eyecatch-min.png)