回答編集履歴
1
追記
test
CHANGED
|
@@ -289,3 +289,81 @@
|
|
|
289
289
|
|
|
290
290
|
|
|
291
291
|
---
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
> 一番上の列の画像が選択されている状態で、同じ列の別の画像をクリックすると、下の列の高さが一瞬ピクンと上に上がってしまう。
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
要素の大きさそのものを変えているからです．
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
※`label`に`background: tomato;`を指定しています
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
このような挙動はナビゲーションメニューで表示する項目を入れ替える際にもよく起きます．
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
要素の大きさや形に依存しない書き方として，`transition`のタイミングを調節する方法を紹介します
|
|
312
|
+
|
|
313
|
+
`transition`プロパティは，記述しているセレクタの状態になるまでの遷移過程を規定します．
|
|
314
|
+
|
|
315
|
+
つまり，こうです．
|
|
316
|
+
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
遷移前の状態には`transition`が設定されていないため，`transition: 0s;`として扱われます：他の状態から，この状態への遷移は0秒で行われます
|
|
320
|
+
|
|
321
|
+
元に戻るのに1秒，遷移するのに0秒でやりたい場合は，以下のように，遷移先のセレクタに`transition: 0s;`を明記する必要があります
|
|
322
|
+
|
|
323
|
+
```css
|
|
324
|
+
|
|
325
|
+
label {
|
|
326
|
+
|
|
327
|
+
width: 150px;
|
|
328
|
+
|
|
329
|
+
height: 150px;
|
|
330
|
+
|
|
331
|
+
margin: 5px;
|
|
332
|
+
|
|
333
|
+
background: tomato;
|
|
334
|
+
|
|
335
|
+
transition: 1s;
|
|
336
|
+
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
input:checked + label {
|
|
342
|
+
|
|
343
|
+
background: palegreen;
|
|
344
|
+
|
|
345
|
+
transition: 0s;
|
|
346
|
+
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
また，`transition`は遅延させることができ，ショートハンドでまとめて記述できるので，以下のような実装ができます
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
（掲載しているgifのコードが読みづらい場合は別タブで開いてみてください）
|
|
360
|
+
|
|
361
|
+
|
|
362
|
+
|
|
363
|
+
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)
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
適当にやってみたのですが，意外とスタイリッシュな動きになりましたね
|
|
368
|
+
|
|
369
|
+
他にも`animation`プロパティを使うやり方もありますが，今回はここで切り上げておきます
|