回答編集履歴
3
必要のないスタイルを削除
test
CHANGED
|
@@ -71,8 +71,6 @@
|
|
|
71
71
|
width: 100px;
|
|
72
72
|
|
|
73
73
|
height: 100px;
|
|
74
|
-
|
|
75
|
-
transition: all 3s ease 0s;
|
|
76
74
|
|
|
77
75
|
border: 1px black solid;
|
|
78
76
|
|
|
@@ -148,4 +146,4 @@
|
|
|
148
146
|
|
|
149
147
|
動作例
|
|
150
148
|
|
|
151
|
-
[https://jsfiddle.net/defghi1977/chdwzg2e/
|
|
149
|
+
[https://jsfiddle.net/defghi1977/chdwzg2e/5/](https://jsfiddle.net/defghi1977/chdwzg2e/5/)
|
2
説明を追加
test
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
あなたのコードに沿った回答ではありませんが, CSSとVanilla JSで作るとしたら動きとしてはこんな感じ？
|
|
1
|
+
あなたのコードに沿った回答ではありませんが, CSSとVanilla JS(素のJavaScript+DOM)で作るとしたら動きとしてはこんな感じ？
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
なお
|
|
6
|
+
|
|
7
|
+
> 1.ウィンドウ内に要素が入ったらフェードイン
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
については考慮していません.これについては適宜`IntersectionObserver`かライブラリを導入して下さい. スクリーンに表示されたタイミングで`display:none`を解除するとCSSアニメーションが着火します.
|
|
2
12
|
|
|
3
13
|
|
|
4
14
|
|
1
コードを更新
test
CHANGED
|
@@ -4,25 +4,29 @@
|
|
|
4
4
|
|
|
5
5
|
```HTML
|
|
6
6
|
|
|
7
|
-
<fieldset id="selector"
|
|
7
|
+
<fieldset id="selector">
|
|
8
8
|
|
|
9
9
|
<legend>filter</legend>
|
|
10
10
|
|
|
11
|
-
<
|
|
11
|
+
<form id="inputs">
|
|
12
12
|
|
|
13
|
-
<label>カテゴリ
|
|
13
|
+
<label>カテゴリA<input type="radio" name="selRadio" value="catA"/></label>
|
|
14
14
|
|
|
15
|
-
<label>カテゴリ
|
|
15
|
+
<label>カテゴリB<input type="radio" name="selRadio" value="catB"/></label>
|
|
16
16
|
|
|
17
|
-
<select>
|
|
17
|
+
<label>カテゴリC<input type="radio" name="selRadio" value="catC"/></label>
|
|
18
18
|
|
|
19
|
-
<
|
|
19
|
+
<select name="selSelect">
|
|
20
20
|
|
|
21
|
-
<option value="cat
|
|
21
|
+
<option value="catA">カテゴリA</option>
|
|
22
22
|
|
|
23
|
-
<option value="cat
|
|
23
|
+
<option value="catB">カテゴリB</option>
|
|
24
24
|
|
|
25
|
+
<option value="catC">カテゴリC</option>
|
|
26
|
+
|
|
25
|
-
</select>
|
|
27
|
+
</select>
|
|
28
|
+
|
|
29
|
+
</form>
|
|
26
30
|
|
|
27
31
|
</fieldset>
|
|
28
32
|
|
|
@@ -48,6 +52,8 @@
|
|
|
48
52
|
|
|
49
53
|
```CSS
|
|
50
54
|
|
|
55
|
+
/*アニメーションは全てCSSで行う*/
|
|
56
|
+
|
|
51
57
|
#items>div{
|
|
52
58
|
|
|
53
59
|
display: inline-block;
|
|
@@ -64,9 +70,11 @@
|
|
|
64
70
|
|
|
65
71
|
display: none;
|
|
66
72
|
|
|
67
|
-
animation: fadeIn 3s ease 0s;
|
|
73
|
+
animation: fadeIn 3s ease 0s backwards;
|
|
68
74
|
|
|
69
75
|
}
|
|
76
|
+
|
|
77
|
+
/*#selectorのクラス値と一致したパネルのみを表示する*/
|
|
70
78
|
|
|
71
79
|
#selector.catA+#items>.catA,
|
|
72
80
|
|
|
@@ -90,16 +98,44 @@
|
|
|
90
98
|
|
|
91
99
|
```JavaScript
|
|
92
100
|
|
|
101
|
+
"use strict";
|
|
102
|
+
|
|
93
|
-
select
|
|
103
|
+
function select(category){
|
|
104
|
+
|
|
105
|
+
//ラジオボタンとドロップダウンの選択状態を揃える
|
|
106
|
+
|
|
107
|
+
inputs.selRadio.value = inputs.selSelect.value = category;
|
|
108
|
+
|
|
109
|
+
//パネルを消すためにクラスを張り替える
|
|
94
110
|
|
|
95
111
|
selector.className = "";
|
|
96
112
|
|
|
97
|
-
|
|
113
|
+
//パネル毎にアニメーションの開始タイミングをずらす
|
|
98
114
|
|
|
115
|
+
[].forEach.call(document.querySelectorAll(`.${category}`),
|
|
116
|
+
|
|
117
|
+
(elem, i) => elem.style.animationDelay = `${i*0.2}s`);
|
|
118
|
+
|
|
119
|
+
//パネルを一度消すために, パネルの表示は非同期的に行う
|
|
120
|
+
|
|
121
|
+
setTimeout(()=> {
|
|
122
|
+
|
|
123
|
+
selector.classList.add(category);
|
|
124
|
+
|
|
125
|
+
}, 100);
|
|
126
|
+
|
|
99
|
-
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
//イベントは上位ノードで処理する
|
|
130
|
+
|
|
131
|
+
selector.onchange = e => select(e.target.value);
|
|
132
|
+
|
|
133
|
+
//カテゴリの初期選択状態を設定する
|
|
134
|
+
|
|
135
|
+
select("catA");
|
|
100
136
|
|
|
101
137
|
```
|
|
102
138
|
|
|
103
139
|
動作例
|
|
104
140
|
|
|
105
|
-
[https://jsfiddle.net/defghi1977/chdwzg2e/](https://jsfiddle.net/defghi1977/chdwzg2e/)
|
|
141
|
+
[https://jsfiddle.net/defghi1977/chdwzg2e/3/](https://jsfiddle.net/defghi1977/chdwzg2e/3/)
|