わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
Post on:2025年2月19日
sponsors
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。
フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレームワークと一緒でも動作します。
Blendyとは
Blendyはわずか数行のコードを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptです。依存関係はなく、単体で動作し、React, Vue.js, Angularをはじめ、ほぼすべてのフレームワークと一緒でも動作します。
MITライセンスで、商用プロジェクトでも無料で利用できます。
Blendyのデモ
動作はBlendyのサイトで確認できます。下記は一つしかクリックしていませんが、他の要素も同様にスムーズにアニメーションします。
Blendyの使い方
パッケージマネージャーを使用してインストールできます。
|
1 |
pnpm install blendy |
また、CDNでも配布されているので、外部ファイルとして以下を記述します。
|
1 2 3 4 |
<script src="https://unpkg.com/blendy/dist/blendy.min.js"></script> <script> const blendy = Blendy.createBlendy() </script> |
基本となるHTMLは下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- ソース要素 --> <button data-blendy-from="foo"> <!-- 単一のラッパー要素が必要です --> <span> Open </span> </button> <!-- ... --> <!-- ターゲット要素 --> <div class="modal" data-blendy-to="foo"> <!-- 単一のラッパー要素が必要です --> <div> <!-- モーダルコンテンツはここに表示されます --> </div> </div> |
アニメーションを実行するために、ソーズ要素とターゲット要素を用意する必要があります。ソース要素にはdata-blendy-fromに任意のidを割り当て、ターゲット要素にはdata-blendy-toにソース要素と同じidを割り当てます。もっとも重要なことは、ソース要素とターゲット要素のコンテンツはdivやspanなど単一のラッパー要素でラップすることです。
続いて、JavaScriptです。
通常、ターゲット要素は表示されるまで（ボタンをクリックするなど）ページ上に表示されません。表示されたら、blendy.toggle('your-id')を呼び出して折りたたみアニメーションをトリガーします。閉じる場合はアニメーションが終了するまで待ってから、ページ上から要素を削除する必要があります。これはuntoggleの2番目の引数としてコールバックを渡すことで処理します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// blendyのインスタンスを作成 const blendy = createBlendy() // ... // モーダルを開くには、アプリ内のどこかでこの関数を呼び出す必要があります。 function showModal() { // これをtrueに設定するとモーダルが表示されます isModalOpen = true // Blendyを実行するコードです blendy.toggle('foo') } // モーダルを閉じるには、この関数を呼び出します。 function CloseModal() { blendy.untoggle('foo', () => { // 切り替えアニメーションが完了したら、モーダルを閉じる必要があります。 isModalOpen = false }) } |
Blendyが機能するには、DOMにアクセスする必要があります。そのため、Blendyをインスタンス化する前にソース要素が読み込まれていることを確認してください。ページが読み込まれた後に追加された新しい要素をサポートするには、blendy.update()を使用します。
|
1 2 3 4 5 6 7 |
// blendyのインスタンスを作成 const blendy = createBlendy() // ... // 新しい要素がページに読み込まれた後にこれを呼び出します。 blendy.update() |
sponsors
