回答編集履歴
1
ふわっと
answer
CHANGED
|
@@ -5,6 +5,13 @@
|
|
|
5
5
|
.content:not(.active){
|
|
6
6
|
display:none;
|
|
7
7
|
}
|
|
8
|
+
.content{
|
|
9
|
+
animation:fadein .5s;
|
|
10
|
+
}
|
|
11
|
+
@keyframes fadein{
|
|
12
|
+
from{opacity:0;}
|
|
13
|
+
to{opacity:1;}
|
|
14
|
+
}
|
|
8
15
|
</style>
|
|
9
16
|
<script>
|
|
10
17
|
window.addEventListener('DOMContentLoaded', function(e){
|
|
@@ -15,7 +22,7 @@
|
|
|
15
22
|
if (max<count) count=1;
|
|
16
23
|
document.querySelectorAll('.active').forEach(x=>x.classList.remove('active'));
|
|
17
24
|
document.querySelectorAll(`.menu:nth-child(${count} of .menu),.content:nth-child(${count} of .content)`).forEach(x=>x.classList.add('active'));
|
|
18
|
-
},
|
|
25
|
+
},2000);
|
|
19
26
|
});
|
|
20
27
|
</script>
|
|
21
28
|
<ol>
|
|
@@ -35,4 +42,5 @@
|
|
|
35
42
|
<h2>ccc</h2>
|
|
36
43
|
<p>contents ccc</p>
|
|
37
44
|
</div>
|
|
38
|
-
```
|
|
45
|
+
```
|
|
46
|
+
※ふわっとさせるの忘れてたので調整
|