質問編集履歴
2
追記しました。現在の状況です。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
[nav]のスタイルが[block ⇔ none]が変更される動きを記述しているのですが、
|
|
3
3
|
このスタイル変更の際にフェードイン、フェードアウトの動きをいれたいです。
|
|
4
4
|
下記にどういったコードを追記したらいいのでしょうか？
|
|
5
|
-
また、このコードだけではできないようでしたら、教えていただきたいです。
|
|
5
|
+
また、このコードだけではできないようでしたら、**教えていただきたいです。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
animeteを追記しました。
|
|
8
8
|
フェードインは正常に動きました。
|
|
9
9
|
しかし、フェードアウトがされず、[block → none]に切り替わるだけです。
|
|
10
10
|
何が問題でしょうか？
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
|
|
16
16
|
menubutton.addEventListener('click', () => {
|
|
17
17
|
nav.style.display = 'block';
|
|
18
|
-
|
|
18
|
+
nav.animate([{opacity: '0'}, {opacity: '1'}], 500)
|
|
19
19
|
});
|
|
20
20
|
closebutton.addEventListener('click', () => {
|
|
21
21
|
nav.style.display = 'none';
|
|
22
|
-
|
|
22
|
+
nav.animate([{opacity: '1'}, {opacity: '0'}], 500)
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
```
|
1
コードを追記しました。現在の状況です。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,4 +3,23 @@
|
|
|
3
3
|
このスタイル変更の際にフェードイン、フェードアウトの動きをいれたいです。
|
|
4
4
|
下記にどういったコードを追記したらいいのでしょうか？
|
|
5
5
|
また、このコードだけではできないようでしたら、教えていただきたいです。
|
|
6
|
+
|
|
7
|
+
太字部分のコード追記しました。
|
|
8
|
+
フェードインは正常に動きました。
|
|
9
|
+
しかし、フェードアウトがされず、[block → none]に切り替わるだけです。
|
|
10
|
+
何が問題でしょうか？
|
|
11
|
+
|
|
12
|
+
```const menubutton = document.querySelector('#menuButton');
|
|
13
|
+
const closebutton = document.querySelector('#closeButton');
|
|
6
|
-
|
|
14
|
+
const nav = document.querySelector('nav');
|
|
15
|
+
|
|
16
|
+
menubutton.addEventListener('click', () => {
|
|
17
|
+
nav.style.display = 'block';
|
|
18
|
+
** nav.animate([{opacity: '0'}, {opacity: '1'}], 500）**
|
|
19
|
+
});
|
|
20
|
+
closebutton.addEventListener('click', () => {
|
|
21
|
+
nav.style.display = 'none';
|
|
22
|
+
** nav.animate([{opacity: '1'}, {opacity: '0'}], 500)**
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
```
|