IntersectionObserverのコードに作成したアニメーションｃｓｓを適応させたいです。

IntersectionObserver
リンク下にあります。の「最初の 1 回のみアニメーション」という項目に、スクロールして画面に要素が入るとアニメーションが1回だけ起動するソースコードを参考に書いてみたのですが、起動しません。ｃｓｓのfilpのアニメーションコードはあっています。

ｃｓｓでfilpで書いた動きのアニメーションをIntersectionObserverのコードに適応させたいのですが、上手くいきません。

<div class="sample filp">をsampleの他にfilpというclass名を付けました。

Intersection observer とは？

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7<title></title>
8    <script src="jquery-3.6.0.min.js"></script>
9	
10<style>
11</style>
12
13</head>
14<body>
15
16<!--アニメーション　表と裏の画像の回転-->
17  <div class="sample flip">
18    <img src="5mouth.png" alt="" id="sumaho3" class="front"><!--表の画像-->
19    <img src="5mouth.png" alt="" id="sumaho6" class="back"><!--裏の画像-->
20  
21    <p></p>
22    
23    </div>
24    <div class="sample flip">
25      <img src="6mouth.png" alt="" id="sumaho4" class="front"><!--表の画像-->
26      <img src="6mouth.png" alt="" id="sumaho7" class="back"><!--裏の画像-->
27    
28    <p></p>
29  </div>
30    
31  <div class="sample flip">
32    <img src="7mouth.png" alt="" id="sumaho5" class="front"><!--表の画像-->
33      <img src="7mouth.png" alt="" id="sumaho8" class="back"><!--裏の画像-->
34    <p></p>
35    
36  
37    </div> 
38<script>
39    (() => {
40      const sample = document.querySelectorAll('.sample');
41    
42      const observer = new IntersectionObserver(entries => {
43        entries.forEach(entry => {
44          if (entry.intersectionRatio > 0) {
45            entry.target.classList.add('sample-animation');
46          } else {
47            entry.target.classList.remove('sample-animation');
48          }
49        });
50      });
51    
52      sample.forEach(img => {
53        observer.observe(img);
54      });
55    })();
56
57</script>
58 
59</body>
60</html>

css
1/* スマホの口コミの画像にアニメーションを設定　表と裏の画像の回転 */
2  .flip {
3    width: 1em;
4    height: 1em;
5    margin-bottom: 1em;
6    animation: flip 2s linear ;
7    transform-style: preserve-3d;
8    font-size: 5em;
9  
10    float:left;/* スマホの口コミの画像を３つに並べる */
11    width:33%
12   
13   
14  
15  }
16   
17  @keyframes flip {
18    0%   { transform: rotateY(0deg); }
19    100% { transform: rotateY(360deg); }
20    
21  }
22   
23  .front, .back {
24    position: absolute;
25    top: 0;
26    left: 0;
27    -webkit-backface-visibility: hidden
28    backface-visibility: hidden;
29    
30  }
31   
32  .back {
33    transform: rotateY(180deg);
34  }
35

行動規範の内容に同意します

回答2件

自己解決

https://cly7796.net/blog/javascript/add-class-when-specified-element-is-displayed-by-scrolling/
で解決しました

投稿2022/02/24 12:13

gujhufiugho

総合スコア245

<div class="sample filp">

「filp」と「flip」が混在しています

１回だけ処理するならクラスのremoveはいらないともいます

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  const observer = new IntersectionObserver(entries => {
3    entries.forEach(entry => {
4      if (entry.intersectionRatio > 0) {
5        entry.target.classList.add('sample-animation');
6      }
7    });
8  });
9  document.querySelectorAll('.sample').forEach(target=>{
10    observer.observe(target);
11  });
12});