| 属性名 | overlay |
|---|---|
| 値 | none | auto |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_overlay |
ポップオーバー(popover) や ダイアログ(<dialog>) など、最上位レイヤで display:none と 非none が切り替わる要素に対して transition-behavior:allow-discrete を指定して トランジション を行う際に意味を持ちます。
このプロパティを直接操作することはありません。表示・非表示が切り替わる際にブラウザが変更します。トランジションをプロパティ毎に設定している場合は、display に加えて overlay にもトランジションを設定する必要があります。シンプルなトランジションであれば overlay を指定しなくてもそれほど見栄えに影響はありませんが、複雑なトランジションを行う場合 overlay をトランジション対象にしておかないと戻る際のトランジションが完全に完了するまえに要素が画面から消えてしまうことがあります。
[popover] {
transition:
transform .3s,
opacity .3s,
display .3s allow-discrete,
overlay .3s allow-discrete;
}
下記の様に暗黙的に全プロパティに対してトランジション設定している場合は必要ありません。
transition: all .3s; /* all を指定している場合 */ transition: .3s; /* all も省略している場合 */