アニメーションとトランジション

アニメーションとトランジションは、ウェブアプリケーションに滑らかな動きと視覚的フィードバックを提供する効果的な方法です。SolidJS では、CSS や JavaScript を用いたアニメーション、及びライブラリが提供するトランジション機能を使って、コンポーネントの表示・非表示や状態の変化を動的に演出することができます。このセクションでは、SolidJS でアニメーションとトランジションを実装する基本的な方法を、具体例を通じて紹介します。

CSS アニメーションの適用

1. CSS アニメーションの定義:
   CSS を使用して、要素のフェードイン・フェードアウトアニメーションを定義します。src/styles.cssファイル（またはプロジェクトの CSS ファイル）に以下のスタイルを追加します。

   .fade-enter {
     opacity: 0;
     transition: opacity 0.5s ease-in;
   }
   
   .fade-enter-active {
     opacity: 1;
   }
   
   .fade-exit {
     opacity: 1;
     transition: opacity 0.5s ease-out;
   }
   
   .fade-exit-active {
     opacity: 0;
   }
   

   Copy to clipboard
2. CSS アニメーションを適用するコンポーネントの作成:
   CSS クラスを適用してアニメーションを制御するコンポーネントを作成します。
   src/components/FadeInComponent.jsを作成し、以下のコードを追加します。

   import { createSignal, Show } from 'solid-js';
   
   function FadeInComponent() {
     const [isVisible, setIsVisible] = createSignal(false);
   
     return (
       <div>
         <button onClick={() => setIsVisible(!isVisible())}>
           Toggle Visibility
         </button>
         <Show
           when={isVisible()}
           enteredClass='fade-enter-active'
           enterClass='fade-enter'
           exitClass='fade-exit'
           exitedClass='fade-exit-active'
         >
           <div>I fade in and out!</div>
         </Show>
       </div>
     );
   }
   
   export default FadeInComponent;
   

   Copy to clipboard
   
   このコンポーネントでは、ボタンをクリックすることで要素の表示・非表示を切り替え、Showディレクティブを使用して CSS アニメーションクラスを適用しています。

JavaScript を使用したアニメーション

JavaScript を使用して、より複雑なアニメーションや動的なアニメーションを実装することもできます。

1. JavaScript アニメーションの実装:
   requestAnimationFrameを使用して、要素の位置をアニメーションさせる例を示します。

   import { onMount } from 'solid-js';
   
   function AnimatedComponent() {
     let ref;
   
     onMount(() => {
       let x = 0;
       const animate = () => {
         x += 1;
         ref.style.transform = `translateX(${x}px)`;
         if (x < 100) {
           requestAnimationFrame(animate);
         }
       };
       requestAnimationFrame(animate);
     });
   
     return <div ref={ref}>I move right!</div>;
   }
   
   export default AnimatedComponent;
   

   Copy to clipboard
   
   このコンポーネントでは、onMountフック内でrequestAnimationFrameを使用して、要素を右に移動させるアニメーションを実行しています。