こんなときに
-
display: none;→display:block;という切り替えが必須な状況。 - フェードインのアニメーションを追加したい。
- cssだけでどうにかしたい。
- フェードインしたらしっぱなし。フェードアウトの機能までは必要ない。
コード
Pug
.wrap
input#show.check(type="checkbox")
label.label(for="show") 表示
.box ふわー
SCSS
.wrap {
background-color: #ddd;
height: 300px;
width: 100%;
position: relative;
padding: 30px;
.box {
height: 200px;
width: 200px;
margin: auto;
background-color: #fadfaa;
display: none;
}
.label {
display: block;
padding: 12px;
border: 1px solid #444;
position: absolute;
bottom: 0;
cursor: pointer;
}
.check {
display: none;
&:checked {
& + .label {
display: none;
}
& ~ .box {
display: block;
animation-name: fade-in;
animation-duration: .7s;
}
}
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
解説
今回のポイント
- displayはtransitionできないため、cssアニメーションを使用する。
- アニメーションで、opacityが0→1に遷移するよう指定する。
displayの切り替え
.box {
//中略
display: none;
}
//中略
.check {
display: none;
&:checked {
//中略
& ~ .box {
display: block;
animation-name: fade-in;
animation-duration: .7s; //遷移時間
}
}
}
.boxという要素をチェックボックスがonの状態になったら、表示する。
display:block → noneという切り替えを行いつつ、cssアニメーションの記述をする。
cssアニメーションの名前を設定。後に @keyframesで設定する。適当な文字列でOK。
遷移時間（秒）を設定する。
アニメーションの設定
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
0%が初期状態、100%がアニメ終了時の状態を表す。今回はopacityを0→1に遷移させるだけでOK。
動作サンプル
参考
CSS3 のみで display: none からフェードインさせる - Qiita
この記事での内容、上記の記事の内容をベースに、コメントでの指摘を混じえたもの。
また今回は、以前の記事で扱った、チェックボックスによる「cssだけで非表示→表示にする手法」を用いている。
その解説の詳細は以下を参照。