回答編集履歴
1
ふわっと
test
CHANGED
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
.menu:not(.active),
|
|
5
5
|
.content:not(.active){
|
|
6
6
|
display:none;
|
|
7
|
+
}
|
|
8
|
+
.content{
|
|
9
|
+
animation:fadein .5s;
|
|
10
|
+
}
|
|
11
|
+
@keyframes fadein{
|
|
12
|
+
from{opacity:0;}
|
|
13
|
+
to{opacity:1;}
|
|
7
14
|
}
|
|
8
15
|
</style>
|
|
9
16
|
<script>
|
|
@@ -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>
|
|
@@ -36,3 +43,4 @@
|
|
|
36
43
|
<p>contents ccc</p>
|
|
37
44
|
</div>
|
|
38
45
|
```
|
|
46
|
+
※ふわっとさせるの忘れてたので調整
|