画像のプレビューなどでよくホバーすると表示されて、ホバーを外して少し時間がたったら消えるヘッダーを作ることになったのでメモ。
実装方法
- ヘッダーのopacityを通常時は0、ホバーした時は1にする
- 通常時とホバーした時それぞれのスタイルに
transition: opacity 秒数を追加する - 通常時に
transition-delayを指定する
<iframe src="https://codesandbox.io/embed/static-l00tu?fontsize=14" title="static" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
面白いのがtransitionを通常時とホバーした時それぞれに書くところ。両方に書くことでそれぞれの場合でtransitionを書き分けることができる。
本当は初回の読み込み時は表示して一定時間たったら消えるようにしたかった。サンプルコードでは初回読み込み時は表示されない。 どうやらcssのみでは実現できず、jsで処理を書く必要があるみたい。