「表の一行ごとにアニメーション（スライドイン）を付ける方法」

アニメーションの準備

表の一行ごとにアニメーション（スライドイン）を付けるためには、HTML、CSS、およびJavaScriptを使用する必要があります。まず、アニメーションを適用する表を作成します。以下は、例として使用する表のコードです。

<table>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

この例では、3つのヘッダーセルと2つのデータ行があります。

HTMLでのアニメーションの実装

次に、HTMLでアニメーションを実装します。各行に対してアニメーションを適用するために、<tr>要素にクラスを追加します。以下は、クラスを追加したコードの例です。

<table>
  <tr class="animated-row">
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  <tr class="animated-row">
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr class="animated-row">
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

ここでは、animated-rowというクラスを追加しました。

CSSでのアニメーションの設定

次に、CSSでアニメーションの設定を行います。以下は、アニメーションを適用するためのCSSの例です。

.animated-row {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.5s;
}

.animated-row.active {
  opacity: 1;
  transform: translateX(0);
}

ここでは、.animated-rowクラスに対して初期状態で透明度を0に設定し、translateX(-100%)で左に移動させます。また、transitionプロパティを使用して、opacityとtransformの変化を0.5秒間かけて行うように設定しています。

さらに、.animated-row.activeクラスを追加し、アニメーションが発動した後の状態を設定します。ここでは、透明度を1に設定し、元の位置に戻すためにtranslateX(0)を使用しています。

JavaScriptでのアニメーションのトリガー

最後に、JavaScriptを使用してアニメーションをトリガーします。以下は、アニメーションをトリガーするためのJavaScriptの例です。

window.addEventListener('scroll', function() {
  var animatedRows = document.querySelectorAll('.animated-row');
  
  for (var i = 0; i < animatedRows.length; i++) {
    var row = animatedRows[i];
    var rowTop = row.getBoundingClientRect().top;
    var rowBottom = row.getBoundingClientRect().bottom;
    var windowHeight = window.innerHeight;
    
    if (rowTop < windowHeight && rowBottom > 0) {
      row.classList.add('active');
    }
  }
});

ここでは、ウィンドウのスクロールイベントを監視し、表示された行に対してactiveクラスを追加するように設定しています。行が画面内に表示されると、activeクラスが追加され、CSSで設定したアニメーションが発動します。

以上で、「表の一行ごとにアニメーション（スライドイン）を付ける方法」の実装が完了しました。HTML、CSS、およびJavaScriptを組み合わせて、表の一行ごとにスライドインアニメーションを実現することができます。