WEBVTT

1
00:00:00.000 --> 00:00:00.881
こんにちは。

2
00:00:00.881 --> 00:00:03.526
シーエスエス、リファレンス解説です。

3
00:00:03.526 --> 00:00:07.051
今回のテーマは、トランジション・プロパティです。

4
00:00:07.051 --> 00:00:11.311
前回は、変化にかける時間、デュレーションを取り上げました。

5
00:00:11.311 --> 00:00:17.041
今回はその土台になる、「どのプロパティを変化の対象にするか」を決める指定です。

6
00:00:17.041 --> 00:00:23.504
ボタンの色と位置が一緒にゆっくり変わるのか、色だけが変わって位置はパッと切り替わるのか。

7
00:00:23.504 --> 00:00:26.883
その分かれ道を決めるのが、このプロパティです。

8
00:00:26.883 --> 00:00:32.465
対象の決め方が分かると、これまでの一括指定のコードも読み解きやすくなります。

9
00:00:32.465 --> 00:00:34.228
順番に見ていきましょう。

10
00:00:34.228 --> 00:00:35.907
位置づけを確認します。

11
00:00:35.907 --> 00:00:42.165
トランジションには、対象を決めるプロパティ、時間を決めるデュレーション、

12
00:00:42.165 --> 00:00:48.423
進み方を決めるタイミング・ファンクション、待ち時間を決めるディレイの四つの担当がありました。

13
00:00:48.423 --> 00:00:52.238
今回のプロパティは、その筆頭、「対象」の担当です。

14
00:00:52.238 --> 00:00:56.130
一括指定のトランジションでは、それぞれのまとまりの最初に書いたプロパティ名が、

15
00:00:56.130 --> 00:01:00.022
この担当分にあたります。

16
00:01:00.022 --> 00:01:05.670
対象を増やしたり減らしたりしたいときは、この部分を書き換えるのが確実です。

17
00:01:05.670 --> 00:01:12.080
時間や進み方は、対象が決まってはじめて意味を持つ、という順番も意識しておきましょう。

18
00:01:12.080 --> 00:01:13.752
書き方を見てみましょう。

19
00:01:13.752 --> 00:01:20.301
セレクターで要素を選び、トランジション・プロパティに、対象にしたいプロパティの名前を書きます。

20
00:01:20.301 --> 00:01:24.969
背景色と位置の両方を対象にしたいなら、背景色を表すバックグラウンド・カラーと、

21
00:01:24.969 --> 00:01:29.637
移動を表すトランスフォームを、カンマで区切って並べます。

22
00:01:29.637 --> 00:01:35.350
書くのは、色や大きさのような値ではなく、変化させたいプロパティの名前そのものです。

23
00:01:35.350 --> 00:01:39.252
このあとの例でも、この二つを対象にした状態から始めます。

24
00:01:39.252 --> 00:01:42.160
名前の代わりに書ける、特別な値も確認します。

25
00:01:42.160 --> 00:01:46.125
オールは、値が変わるすべてのプロパティを対象にする指定です。

26
00:01:46.125 --> 00:01:48.768
ナンは、どのプロパティも対象にしません。

27
00:01:48.768 --> 00:01:51.279
オールは手軽ですが、注意点もあります。

28
00:01:51.279 --> 00:01:57.888
自分では変えるつもりのなかったプロパティまで、いつの間にか滑らかに動き始めてしまうことがあるのです。

29
00:01:57.888 --> 00:02:03.703
特に、レイアウトに関わるプロパティが意図せず動くと、表示が崩れて見える原因にもなります。

30
00:02:03.703 --> 00:02:07.668
そのため記事では、対象を名前で絞って書くことを勧めています。

31
00:02:07.668 --> 00:02:10.840
まずは対象を明示する書き方に慣れていきましょう。

32
00:02:10.840 --> 00:02:12.777
初期値と継承を確認します。

33
00:02:12.777 --> 00:02:15.459
このプロパティの初期値はオールです。

34
00:02:15.459 --> 00:02:20.824
つまり、何も書かなくても、すべてのプロパティが変化の対象になっています。

35
00:02:20.824 --> 00:02:24.922
時間を決めるデュレーションさえ指定すれば、対象を書かなくても変化が滑らかに見えるのは、

36
00:02:24.922 --> 00:02:29.020
この初期値のおかげです。

37
00:02:29.020 --> 00:02:30.659
ただし継承はしません。

38
00:02:30.659 --> 00:02:33.937
親の要素に書いても、子の要素には効きません。

39
00:02:33.937 --> 00:02:40.196
対象をはっきり決めたいときは、変化させたい要素自身に、名前を書いて指定してください。

40
00:02:40.196 --> 00:02:42.716
記事の活用例を見てみましょう。

41
00:02:42.716 --> 00:02:50.781
薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。

42
00:02:50.781 --> 00:02:55.233
ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、

43
00:02:55.233 --> 00:02:59.686
ボタンが少し上へ移動します。

44
00:02:59.686 --> 00:03:03.718
注目は最後の行、トランジション・プロパティです。

45
00:03:03.718 --> 00:03:07.583
対象として、背景色と位置の二つが並んでいます。

46
00:03:07.583 --> 00:03:14.975
この指定があるため、色の変化も、位置の変化も、両方とも四百ミリ秒かけて滑らかに進みます。

47
00:03:14.975 --> 00:03:23.208
ボタンの見た目の土台は上の行で作られ、変化のルールは下の行で決まる、という読み分けもポイントです。

48
00:03:23.208 --> 00:03:27.792
違いを確かめるには、最後の行の値を、背景色だけに置き換えます。

49
00:03:27.792 --> 00:03:30.010
変えるのは対象の一覧だけです。

50
00:03:30.010 --> 00:03:34.890
すると、背景色はこれまで通り、四百ミリ秒かけてゆっくり変わります。

51
00:03:34.890 --> 00:03:42.137
一方、対象から外れた位置の変化は、時間をかける相手がいなくなるため、その場でパッと切り替わります。

52
00:03:42.137 --> 00:03:46.721
同じホバー操作でも、動くものと動かないものが分かれるわけです。

53
00:03:46.721 --> 00:03:52.636
対象に挙げるかどうかが、そのまま「滑らかに変えるかどうか」の分かれ道になります。

54
00:03:52.636 --> 00:03:55.742
このプロパティが効くための条件を整理します。

55
00:03:55.742 --> 00:04:01.813
一つ目は、対象に挙げたプロパティの値が、ホバーやフォーカスなどで実際に変わることです。

56
00:04:01.813 --> 00:04:05.201
値が変わらなければ、変化そのものが始まりません。

57
00:04:05.201 --> 00:04:10.143
二つ目は、変化にかける時間、デュレーションが、ゼロより大きいことです。

58
00:04:10.143 --> 00:04:14.660
時間がゼロでは、対象に挙げていても即座に切り替わってしまいます。

59
00:04:14.660 --> 00:04:20.025
逆に、対象に挙げていないプロパティは、時間を長くしても滑らかにはなりません。

60
00:04:20.025 --> 00:04:23.696
対象と時間は、セットでそろえるものと覚えてください。

61
00:04:23.696 --> 00:04:25.436
配慮の指定も確認します。

62
00:04:25.436 --> 00:04:33.554
記事の例には、端末で「動きを減らす」設定が有効なとき、トランジション自体を止めるメディアクエリが含まれています。

63
00:04:33.554 --> 00:04:38.627
対象をいくら丁寧に選んでも、動きそのものが負担になる人がいるためです。

64
00:04:38.627 --> 00:04:44.716
対象や時間を調整できるからこそ、止めるという選択肢も、セットで用意しておきましょう。

65
00:04:44.716 --> 00:04:48.920
あわせて、ホバーだけでなく、キーボードのフォーカスが当たったときにも同じ変化が起きるかを、

66
00:04:48.920 --> 00:04:53.124
忘れずに確認してください。

67
00:04:53.124 --> 00:04:55.089
効かないときの確認です。

68
00:04:55.089 --> 00:05:02.128
まず、対象に挙げたプロパティの値が、操作に合わせて本当に変わっているかを見てください。

69
00:05:02.128 --> 00:05:07.203
次に、時間、デュレーションがゼロになっていないかを確認します。

70
00:05:07.203 --> 00:05:14.734
逆に、オールで対象を広げすぎて、意図しない要素まで動いているケースも、ここで見つけられます。

71
00:05:14.734 --> 00:05:24.557
開発者ツールでは、スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的な対象の一覧を確認する順番が有効です。

72
00:05:24.557 --> 00:05:29.632
セレクターとクラスが一致しているかも、あわせて見直しましょう。

73
00:05:29.632 --> 00:05:31.665
ブラウザー互換性は良好です。

74
00:05:31.665 --> 00:05:36.096
プロパティ自体は、クローム、エッジ、ファイアフォックス、サファリのいずれも、

75
00:05:36.096 --> 00:05:40.526
かなり前のバージョンから接頭辞なしで使えます。

76
00:05:40.526 --> 00:05:46.045
まとめると、トランジション・プロパティは、滑らかに変える対象を選ぶ指定です。

77
00:05:46.045 --> 00:05:48.369
初期値はオール、継承はしません。

78
00:05:48.369 --> 00:05:52.509
練習として、背景色と位置の両方を対象にした場合と、背景色だけにした場合の違いを、

79
00:05:52.509 --> 00:05:56.648
自分の言葉で説明してみてください。

80
00:05:56.648 --> 00:06:02.313
次回は、回転や移動の基準点を決める、トランスフォーム・オリジンを取り上げます。

81
00:06:02.313 --> 00:06:03.620
お疲れさまでした。