質問編集履歴
2
内容の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,45 +4,15 @@
|
|
|
4
4
|
HTML内にある情報をチェックボックスなどで絞り込んだ際にhideクラスを付与し、
|
|
5
5
|
display:noneで表示・非表示を切り替えて画面上で絞り込みされているようにしています。
|
|
6
6
|
|
|
7
|
-
絞り込み結果が表示される時に記事がフワッと出てくるようなアニメーションをつけたい
|
|
7
|
+
絞り込み結果が表示される時に記事がフワッと出てくるようなアニメーションをつけたいです
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
### 該当のソースコード
|
|
11
11
|
|
|
12
12
|
```HTML
|
|
13
|
-
|
|
13
|
+
|
|
14
|
-
<h3>家族構成</h3>
|
|
15
|
-
<ul>
|
|
16
|
-
<li><label><input type="checkbox" name="cat[fa][]" value="fa1">子育て</label></li>
|
|
17
|
-
<li><label><input type="checkbox" name="cat[fa][]" value="fa2">2世帯</label></li>
|
|
18
|
-
<li><label><input type="checkbox" name="cat[fa][]" value="fa3">夫婦のみ</label></li>
|
|
19
|
-
<li><label><input type="checkbox" name="cat[fa][]" value="fa4">ペット</label></li>
|
|
20
|
-
<li><label><input type="checkbox" name="cat[fa][]" value="fa5">その他</label></li>
|
|
21
|
-
</ul>
|
|
22
|
-
<hr>
|
|
23
|
-
<h3>延床面積</h3>
|
|
24
|
-
<ul>
|
|
25
|
-
<li><label><input type="radio" name="cat[tfa][]" value="tfa1">～30坪</label></li>
|
|
26
|
-
<li><label><input type="radio" name="cat[tfa][]" value="tfa2">30～40坪</label></li>
|
|
27
|
-
<li><label><input type="radio" name="cat[tfa][]" value="tfa3">40～50坪</label></li>
|
|
28
|
-
<li><label><input type="radio" name="cat[tfa][]" value="tfa4">50坪～</label></li>
|
|
29
|
-
</ul>
|
|
30
|
-
<hr>
|
|
31
|
-
<h3>カラー</h3>
|
|
32
|
-
<ul>
|
|
33
|
-
<li><label><input type="radio" name="cat[co][]" value="co1">クリア</label></li>
|
|
34
|
-
<li><label><input type="radio" name="cat[co][]" value="co2">ナチュラル</label></li>
|
|
35
|
-
<li><label><input type="radio" name="cat[co][]" value="co3">ホワイト</label></li>
|
|
36
|
-
<li><label><input type="radio" name="cat[co][]" value="co4">ミディアム</label></li>
|
|
37
|
-
<li><label><input type="radio" name="cat[co][]" value="co5">エボニー</label></li>
|
|
38
|
-
<li><label><input type="radio" name="cat[co][]" value="co6">ダーク</label></li>
|
|
39
|
-
<li><label><input type="radio" name="cat[co][]" value="co7">ブラック</label></li>
|
|
40
|
-
<li><label><input type="radio" name="cat[co][]" value="co8">チェリー</label></li>
|
|
41
|
-
<li><label><input type="radio" name="cat[co][]" value="co9">オリジナル</label></li>
|
|
42
|
-
</ul>
|
|
43
|
-
<button id="filterBtn" type="button">
|
|
14
|
+
<button id="filterBtn" type="button" onClick="hyouji()>検索する</button>
|
|
44
|
-
</form>
|
|
45
|
-
<ul class="filter-items">
|
|
15
|
+
<ul class="filter-items" id="contentCase">
|
|
46
16
|
<li data-filter-key="fa3 fa4 tfa3 th1 th2 th3 th4 th5 th6 ta5 ho5 co5">
|
|
47
17
|
<p>夫婦のみ | ペット | 2階 | 40～50坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 融合 | スポーツ | エボニー</p>
|
|
48
18
|
</li>
|
|
@@ -62,46 +32,28 @@
|
|
|
62
32
|
.hide{
|
|
63
33
|
display:none;
|
|
64
34
|
}
|
|
35
|
+
@keyframes fadeIn {
|
|
36
|
+
from{opacity: 0}
|
|
37
|
+
to {opacity: 1}
|
|
38
|
+
}
|
|
39
|
+
.view{
|
|
40
|
+
animation: fadeIn 1s;
|
|
41
|
+
}
|
|
42
|
+
|
|
65
43
|
```
|
|
66
44
|
|
|
67
45
|
```JavaScript
|
|
46
|
+
function hyouji(){
|
|
68
|
-
|
|
47
|
+
const ul = document.getElementById('contentCase');
|
|
69
|
-
|
|
48
|
+
ul.classList.add('view');
|
|
70
|
-
var r1=document.querySelectorAll('[name="cat[fa][]"]:checked');/*家族構成*/
|
|
71
|
-
var r2=document.querySelector('[name="cat[tfa][]"]:checked');/*延床面積*/
|
|
72
|
-
var r3=document.querySelectorAll('[name="cat[th][]"]:checked');/*テーマ*/
|
|
73
|
-
var r4=document.querySelectorAll('[name="cat[ta][]"]:checked');/*テイスト*/
|
|
74
|
-
var r5=document.querySelectorAll('[name="cat[ho][]"]:checked');/*趣味*/
|
|
75
|
-
var r6=document.querySelector('[name="cat[co][]"]:checked');/*カラー*/
|
|
76
|
-
document.querySelectorAll('.filter-items li[data-filter-key]').forEach(x=>{
|
|
77
|
-
var flgs=[];
|
|
78
|
-
var keys=x.dataset["filterKey"].split(" ");
|
|
79
|
-
if(r1.length>0){
|
|
80
|
-
flgs.push(keys.some(x=>[...r1].map(x=>x.value).includes(x)));
|
|
81
|
-
|
|
49
|
+
}
|
|
82
|
-
if(r2!=null){
|
|
83
|
-
flgs.push(keys.includes(r2.value));
|
|
84
|
-
}
|
|
85
|
-
if(r3.length>0){
|
|
86
|
-
flgs.push(keys.some(x=>[...r3].map(x=>x.value).includes(x)));
|
|
87
|
-
}
|
|
88
|
-
if(r4.length>0){
|
|
89
|
-
flgs.push(keys.some(x=>[...r4].map(x=>x.value).includes(x)));
|
|
90
|
-
}
|
|
91
|
-
if(r5.length>0){
|
|
92
|
-
flgs.push(keys.some(x=>[...r5].map(x=>x.value).includes(x)));
|
|
93
|
-
}
|
|
94
|
-
if(r6!=null){
|
|
95
|
-
flgs.push(keys.includes(r6.value));
|
|
96
|
-
}
|
|
97
|
-
x.classList.toggle('hide',flgs.includes(false));
|
|
98
|
-
});
|
|
99
|
-
});
|
|
100
|
-
});
|
|
101
50
|
|
|
102
51
|
```
|
|
52
|
+
リロードして最初にクリックした際にはふわっと表示できたのですがリロードなしで二回目以降はふわっとなりませんでした
|
|
103
53
|
|
|
104
54
|
### 追記
|
|
105
55
|
表示されている→絞り込みを実行→一度全ての記事を非表示にし、該当の記事をふわっと表示
|
|
106
56
|
のようにボタンで絞り込みを実行した際にふわっと表示させたいです
|
|
107
|
-
一度全ての記事を非表示にする段階でもできたらふわっと消したいです
|
|
57
|
+
一度全ての記事を非表示にする段階でもできたらふわっと消したいです
|
|
58
|
+
|
|
59
|
+
ボタンをクリックする度にふわっと表示させたいです
|
1
情報の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -99,4 +99,9 @@
|
|
|
99
99
|
});
|
|
100
100
|
});
|
|
101
101
|
|
|
102
|
-
```
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### 追記
|
|
105
|
+
表示されている→絞り込みを実行→一度全ての記事を非表示にし、該当の記事をふわっと表示
|
|
106
|
+
のようにボタンで絞り込みを実行した際にふわっと表示させたいです
|
|
107
|
+
一度全ての記事を非表示にする段階でもできたらふわっと消したいです
|