回答編集履歴
5
typo
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
- 2つ目の`gazou.classList.add("turn");`（`callback()`関数の中）が、即実行されてしまっている。
|
|
38
38
|
- なので同じく、ページロードされた瞬間にアニメーションが始まって終了していました。
|
|
39
|
-
- オブザーバーは常に要素を監視しているので、**ページロード直後とスクロール時に監視処理が行われる（＝コールバック関数が呼ばれる）**ようです。
|
|
39
|
+
- オブザーバーは常に要素を監視しているので、 **ページロード直後とスクロール時に監視処理が行われる（＝コールバック関数が呼ばれる）** ようです。
|
|
40
40
|
- 要素が見える見えない（＝エリア内にあるかどうか）は関係ありません。
|
|
41
41
|
- サンプルページを開いてスクロールさせながら、コンソールを見ていただいたら分かりやすいと思います。
|
|
42
42
|
|
4
Make the conclusion more understandable
test
CHANGED
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
|
|
37
37
|
- 2つ目の`gazou.classList.add("turn");`（`callback()`関数の中）が、即実行されてしまっている。
|
|
38
38
|
- なので同じく、ページロードされた瞬間にアニメーションが始まって終了していました。
|
|
39
|
-
- オブザーバーは常に要素を監視しているので、監視
|
|
39
|
+
- オブザーバーは常に要素を監視しているので、**ページロード直後とスクロール時に監視処理が行われる（＝コールバック関数が呼ばれる）**ようです。
|
|
40
|
-
- 要素が見える見えないは関係
|
|
40
|
+
- 要素が見える見えない（＝エリア内にあるかどうか）は関係ありません。
|
|
41
|
-
- サンプルページ
|
|
41
|
+
- サンプルページを開いてスクロールさせながら、コンソールを見ていただいたら分かりやすいと思います。
|
|
42
42
|
|
|
43
43
|
### 行った対策
|
|
44
44
|
- 監視対象が対象エリア（デフォルトのビューポート）に入ったことを検知したら、クラスを付与するという処理にかえました。
|
3
サンプル差し替え
test
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
### 動いたコード
|
|
2
|
-
- サンプル https://jsfiddle.net/
|
|
2
|
+
- サンプル https://jsfiddle.net/jk9fqz0h/
|
|
3
3
|
```javascript
|
|
4
4
|
const gazou = document.getElementById("gazou");
|
|
5
5
|
const options = {
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
- なので同じく、ページロードされた瞬間にアニメーションが始まって終了していました。
|
|
39
39
|
- オブザーバーは常に要素を監視しているので、監視した瞬間にコールバック関数が呼ばれている感じでした。
|
|
40
40
|
- 要素が見える見えないは関係なく、監視した瞬間に作動している感じ。
|
|
41
|
+
- サンプルページの中のコンソールを見ていただいたら分かりやすいと思います。
|
|
41
42
|
|
|
42
43
|
### 行った対策
|
|
43
44
|
- 監視対象が対象エリア（デフォルトのビューポート）に入ったことを検知したら、クラスを付与するという処理にかえました。
|
2
add appendix code
test
CHANGED
|
@@ -47,3 +47,16 @@
|
|
|
47
47
|
|
|
48
48
|
- ためしにoptionsで`threshold: [0.2, 1.0]`適当に設定してみたら、うまく動きました！
|
|
49
49
|
|
|
50
|
+
### おまけ：つけたクラスを外す方法
|
|
51
|
+
要素が見えなくなった時にクラスをはずすこともできます。if文にelse ifを追加したらできます。
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
// 前略
|
|
55
|
+
if (entry.intersectionRatio === 1) {
|
|
56
|
+
entry.target.classList.add('turn');
|
|
57
|
+
} else if (!entry.isIntersecting) { // 要素が見えなくなる時
|
|
58
|
+
entry.target.classList.remove('turn');
|
|
59
|
+
}
|
|
60
|
+
// 後略
|
|
61
|
+
```
|
|
62
|
+
|
1
remove console.log from code
test
CHANGED
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
observer.observe(gazou);
|
|
10
10
|
|
|
11
11
|
function callback(entries) {
|
|
12
|
-
console.log(entries);
|
|
13
12
|
entries.forEach(entry => {
|
|
14
13
|
if (entry.intersectionRatio === 1) {
|
|
15
14
|
entry.target.classList.add('turn');
|