プレミアム会員限定動画

jQueryで簡単にフェードイン・フェードアウトができる、fadeIn・fadeOut・fadeToggleとJSでの書き換え 後編

前半の動画はこちらです
https://factory-programming-mv.com/video/mKlK9jy8Ieo/


この動画では、前回の続編として、フェードイン・フェードアウト・フェードトグルの機能をJavaScriptで実装する方法を解説します。使用する技術はWebアニメーションAPI（ウェブアニメーションAPI, WAAPI）です。これはブラウザ標準で利用可能なAPIで、自作のアニメーションライブラリなどを使用せずにアニメーションを制御することができます。

初めに、フェードインの処理をJavaScriptで再現します。まず対象となるHTML要素（ターゲット）をDocument.querySelectorメソッドで取得し、その要素のdisplayプロパティをblockに設定します。これにより、要素が表示状態になります。

次に、WebアニメーションAPIを使用してフェードインのアニメーションを作成します。アニメーションの対象要素にanimateメソッドを適用し、その中にオブジェクトを配列として渡します。オブジェクトには、オパシティを0から1に変化させる設定を書き込みます。

アニメーションの速度はdurationプロパティを使用して制御します。例えば、durationを1000に設定すると、1000ミリ秒（1秒）かけてアニメーションが実行されます。

また、アニメーションが終了した後もその状態を保持するために、fillプロパティに'forwards'を設定します。これにより、アニメーションが終了してもオパシティは1（完全に不透明）のままになります。

フェードアウトやフェードトグルも同様の方法で実装できます。フェードアウトはオパシティを1から0に変化させ、フェードトグルは現在の状態によってフェードインまたはフェードアウトを実行するようにします。

最後に、特定のボタンがクリックされた際にこれらのアニメーションをトリガーするようにするため、addEventListenerメソッドを使用してイベントハンドラを設定します。

以上が、jQueryのフェードイン・フェードアウト・フェードトグルの機能をJavaScriptで再現する方法です。