Alpine.jsでフェードインするメニューを作る

WEB制作
Alpine.jsでフェードインするメニューを作る

皆様こんにちは塩田です。

今回はAlpine.jsを使用して、簡単に下からふわっと現れるメニューを作ってみたいと思います。

 

公式

https://alpinejs.dev

 

導入はCDNを利用します

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

 

実際に制作したものをご参照ください。

See the Pen
Untitled by shiota (@shioweb)
on CodePen.

やっていることは非常にシンプルで、特にふわっと下から現れるエフェクトは従来だとCSSやjQueryを組み合わせて作っていたものを、alpine.jsのx-transitionというディレクティブだけで実装しています。

詳細はコードを参照していただければすぐに理解していただけると思いますが、以下に簡単な説明をいたします。

 

ここがエフェクトの入り口となります。ざっと見ただけで何をしようとしているのか理解できると思います。

x-transition:enter="transition ease-out duration-300"

 

そして開始と終了の状態をそれぞれ記載します。
x-transition:enter-start="opacity-0 translate-y-3"
x-transition:enter-end="opacity-100 translate-y-0"

 

また今回はクリックイベントで表示・非表示を切り替えているので、非表示の際の挙動も合わせて記述します。といっても基本的に入り口と同じ考え方で、逆の動作をしているだけです。
x-transition:leave="transition ease-out duration-300"

x-transition:leave-start="opacity-100 translate-y-0"

x-transition:leave-end="opacity-0 translate-y-3"

x-transitionの詳細はこちら

https://alpinejs.dev/directives/transition

 

更にJSもインラインに書いてしまうこともできます。

See the Pen
Untitled by shiota (@shioweb)
on CodePen.

 

以上となります。

 

※余談

スタイルはTilwindを使っているためCSSは一切書いていませんので、2つ目の事例ですとhtmlだけで完結しています。効率や可読性を考えると各々分けて管理するのがいいか、または纏めて管理するのがいいかはケースバイケースになると思います。