Q&A
コードをコピペして画像だけ別のに差し替えたら動いてます。
https://jsfiddle.net/5sxyLrca/
前提
エラーは出ませんが、CSSのアニメーションが作動しません。
お分かりの方、ご教授いただければ幸いです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <link rel="stylesheet" href="style.css" /> 6 <title>Document</title> 7 </head> 8 <body> 9 <main> 10 <img id="gazou" src="img/target.svg" alt="" /> 11 </main> 12 <script src="main.js"></script> 13 </body> 14</html> 15
css
1.turn { 2animation:turn 1s; 3} 4 5@keyframes turn { 6to { 7transform:rotateY(1turn); 8} 9}
js
1const gazou = document.getElementById("gazou"); 2console.log(gazou); 3 4let observer = new IntersectionObserver(callback); 5 6observer.observe(gazou); 7console.log(observer); 8gazou.classList.add("turn"); 9 10function callback() { 11 gazou.classList.add("turn"); 12} 13
SVG画像でも大丈夫でした。
https://jsfiddle.net/5sxyLrca/1/
ごめんなさい勘違い。スクロールでアニメーションさせたいんですね。
返答ありがとうございます。どうぞよろしくお願いいたします。
オブザーバー動いてはいるんですよね。クラスをつけて数行後に外すっていう処理してみたら、つけてはずしてくれてるのは見えるのですが、要素が画面に見えてないのにつけはじめるんですよねぇ。
ちなみに、yukarinさんのかいていた、
console.log(observer);
gazou.classList.add("turn");
ここのaddの行は邪魔だったので消しました。
ページ読み込まれた瞬間にturnがついちゃう。
ご回答いただきありがとうございました！
回答2件
0
ベストアンサー
動いたコード
javascript
1const gazou = document.getElementById("gazou"); 2const options = { 3 threshold: [0.2, 1.0] 4}; 5let observer = new IntersectionObserver(callback, options); 6observer.observe(gazou); 7 8function callback(entries) { 9 entries.forEach(entry => { 10 if (entry.intersectionRatio === 1) { 11 entry.target.classList.add('turn'); 12 } 13 }) 14}
不具合の原因
推測なので間違っているのかもしれませんが、質問者様のコードの場合、
↓質問者様のコードより抜粋
javascript
1gazou.classList.add("turn"); 2 3function callback() { 4 gazou.classList.add("turn"); 5}
- 1つ目の
gazou.classList.add("turn");のせいで、ページがロードされた瞬間にクラスがついてしまいます。- ページロードされた瞬間にアニメーションが始まって終了。
- あとからJSのオブザーバーが作動してつけようとしても、すでについているので意味なしでした。
→では、その問題の行を削除しても、、、
- 2つ目の
gazou.classList.add("turn");（callback()関数の中）が、即実行されてしまっている。- なので同じく、ページロードされた瞬間にアニメーションが始まって終了していました。
- オブザーバーは常に要素を監視しているので、 ページロード直後とスクロール時に監視処理が行われる（＝コールバック関数が呼ばれる） ようです。
- 要素が見える見えない（＝エリア内にあるかどうか）は関係ありません。
- サンプルページを開いてスクロールさせながら、コンソールを見ていただいたら分かりやすいと思います。
行った対策
- 監視対象が対象エリア（デフォルトのビューポート）に入ったことを検知したら、クラスを付与するという処理にかえました。
if (entry.intersectionRatio === 1) { entry.target.classList.add('turn'); }の部分です。
→これだけだと全く感知されなくなってしまい…
- ためしにoptionsで
threshold: [0.2, 1.0]適当に設定してみたら、うまく動きました！
おまけ：つけたクラスを外す方法
要素が見えなくなった時にクラスをはずすこともできます。if文にelse ifを追加したらできます。
javascript
1// 前略 2 if (entry.intersectionRatio === 1) { 3 entry.target.classList.add('turn'); 4 } else if (!entry.isIntersecting) { // 要素が見えなくなる時 5 entry.target.classList.remove('turn'); 6 } 7// 後略
投稿2022/09/30 16:01
編集2022/09/30 16:34総合スコア2314
0
既にCocodeさんが回答してくださっていますが、私なりの見解です。
画像が画面内に入ったタイミングでアニメーションさせたいという要件と解釈して記載します。
要件を実現させるには以下の二つの条件を満たす必要があります。
・クラスが付与されていない状態(から一定時間経過した状態)でクラスを付与する
・アニメーション完了以降にクラスを削除する
サンプル1
こちらの案はanimationendイベントをリッスンすることによってアニメーションが確実に終了してからクラスを削除しています。
また、画面内に入った場合のみアニメーションさせるためisIntersectingプロパティがtrueの場合のみクラスを付与しています。
js
1const gazou = document.getElementById("gazou"); 2 3let observer = new IntersectionObserver(callback); 4observer.observe(gazou); 5 6function callback([entry]) { 7 entry.isIntersecting && gazou.classList.add("turn"); 8} 9 10gazou.addEventListener('animationend', function() { 11 gazou.classList.remove("turn"); 12});
サンプル2
こちらの案は画像が画面内に入った場合はクラスを付与、画面外にでた場合はクラスを削除します。
画面内/画面外の判定はサンプル1と同様にisIntersectingプロパティにて判定します。
boolean値に応じてクラスの付与・削除を行う場合はtoggleメソッドを使用すると簡潔に記述可能です。
js
1const gazou = document.getElementById("gazou"); 2 3let observer = new IntersectionObserver(callback); 4observer.observe(gazou); 5 6function callback([entry]) { 7 gazou.classList.toggle("turn", entry.isIntersecting); 8}
投稿2022/09/30 17:06
総合スコア136
あなたの回答
tips
プレビュー
