回答編集履歴
1
追記
answer
CHANGED
|
@@ -143,4 +143,43 @@
|
|
|
143
143
|
- [CSS Grid Layoutをガッツリ使った所感](https://ics.media/entry/17403)
|
|
144
144
|
これを機に，Autoprefixerというプラグインを入れました
|
|
145
145
|
|
|
146
|
-
---
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
> 一番上の列の画像が選択されている状態で、同じ列の別の画像をクリックすると、下の列の高さが一瞬ピクンと上に上がってしまう。
|
|
149
|
+
|
|
150
|
+
要素の大きさそのものを変えているからです．
|
|
151
|
+
|
|
152
|
+
※`label`に`background: tomato;`を指定しています
|
|
153
|
+
|
|
154
|
+
このような挙動はナビゲーションメニューで表示する項目を入れ替える際にもよく起きます．
|
|
155
|
+
|
|
156
|
+
要素の大きさや形に依存しない書き方として，`transition`のタイミングを調節する方法を紹介します
|
|
157
|
+
`transition`プロパティは，記述しているセレクタの状態になるまでの遷移過程を規定します．
|
|
158
|
+
つまり，こうです．
|
|
159
|
+
|
|
160
|
+
遷移前の状態には`transition`が設定されていないため，`transition: 0s;`として扱われます：他の状態から，この状態への遷移は0秒で行われます
|
|
161
|
+
元に戻るのに1秒，遷移するのに0秒でやりたい場合は，以下のように，遷移先のセレクタに`transition: 0s;`を明記する必要があります
|
|
162
|
+
```css
|
|
163
|
+
label {
|
|
164
|
+
width: 150px;
|
|
165
|
+
height: 150px;
|
|
166
|
+
margin: 5px;
|
|
167
|
+
background: tomato;
|
|
168
|
+
transition: 1s;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
input:checked + label {
|
|
172
|
+
background: palegreen;
|
|
173
|
+
transition: 0s;
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
また，`transition`は遅延させることができ，ショートハンドでまとめて記述できるので，以下のような実装ができます
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
（掲載しているgifのコードが読みづらい場合は別タブで開いてみてください）
|
|
181
|
+
|
|
182
|
+
cf. [【CSS3】Transition（変化）関連のまとめ](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75#%E8%A4%87%E6%95%B0%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E8%A8%98%E8%BF%B0)
|
|
183
|
+
|
|
184
|
+
適当にやってみたのですが，意外とスタイリッシュな動きになりましたね
|
|
185
|
+
他にも`animation`プロパティを使うやり方もありますが，今回はここで切り上げておきます
|