スクロールアニメーションがうまくできない

Question

###実現したい事
下記のサイトを参考にスクロールアニメーションを実装しました。
あるスクロールして要素が表示されると、アニメーション付きで表示されます。
https://firstlayout.net/css-animation-of-images/
参考サイトのようにうまく実装はできたのですが、指定したclass全てに適用となり、
eachで繰り返しているそのclassを保有する全ての要素に対しアニメーションが発生してしまいます。
おそらく、thisなどを使い、そのクラスのthis（その要素）に対しという支持が必要かと思いますが、js部分でどのようにすれば良いか把握できずにいます。
###コード

<div class="main">
  <% @articles.each do |article| %>
    <div class="index-left">
      <div class="article-img">
        <%= image_tag article.image_name.thumb.url %>
        <h2><%= article.title %></h2>
      </div>
    </div>
  <% end %>
</div>

$(document).on('turbolinks:load',function() {
  const image = document.querySelectorAll('.index-left');
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('img-animation');
      } else {
        entry.target.classList.remove('img-animation');
      }
    });
  });
  Array.prototype.forEach.call(image, function(img) {
    observer.observe(img);
  });
})();

.article-img {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.article-img:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}
@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}

お分かりの方いましたらご教示お願いします。

Answer 1

CSSで指定しているアニメーションですが、
.img-animationの子要素の.article-imgに指定しいないといけないのでは。

.img-animation .article-img {
    animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
}

Intersection Observerで要素監視→Classをトグルの部分は意図通りに動いているように見えます。

Comments

[tomtom1]

ありがとうございます！お教え頂いたように書くとどのようなことが起きますか？汗
今のところ、アニメーションはうまく実装できているので、改善の必要はないのかなと思っています。

うまくいっていない点については、
<% @articles.each do |article| %>でarticleを一覧しているのですが、全てのarticleが同じclassを保有しているため、一番トップのarticleのアニメーションが着火されると、全てのarticleにアニメーションが同時に起動します。そこをそれぞれに直したいです。おそらくjsあたりで、"その要素に"という記述が必要かと思っています..。

[退会済みユーザー]

こちらはCSSを調整した場合のデモです。
https://codepen.io/lisa1111/pen/abvBRvx
（ところどころ勝手に調整してます。）

「アニメーションの対象となる要素」をCSSで変えることが必要です。

今JSでclassを付け外しされていますので、
`.img-animation`クラスが付与された要素にアニメーションが起こるようにしなければなりません。
その例が先のCSSです。

現状は、CSSの指定で`.article-img` や `.article-img:before` クラスを持つ「全て」の要素がアニメーションの対象になっています。

そのため、おっしゃっているように
「全てのarticleにアニメーションが同時に起動」するようになっています。

[tomtom1]

ご回答ありがとうございます！まさにこちらがやりたかったことです！
少し時間かかってしまいましたが、無事解決しました！ありがとうございます。

[退会済みユーザー]

無事に解決できてよかったです^^