CSSのみでアコーディオンを実装しましたが、ハマってしまったので、メモ。
display:noneは使わず、height、opacity、overflow、visibilityを使う
htmlは記事下部にあるgitをご覧ください。
CSSの例
#navi-menu-submenu1 {
height: 0;
opacity: 0;
overflow: hidden;
transition:
height .3s linear,
opacity 0s linear .3s,
visibility 0s linear .3s;
visibility:hidden;
}
#navi-menu-input-submenu1:checked ~ #navi-menu-submenu1 {
height: 184px;
opacity: 1;
transition:
height .3s linear,
opacity .3s linear,
visibility .3s linear;
visibility: visible;
}
display:noneは、アニメーションしない
アコーディオンを実装するとき、アニメーションなしであれば、display:noneを使うのが簡単です。
CSSの例
#navi-menu-submenu1 {
display: none;
}
#navi-menu-input-submenu1:checked ~ #navi-menu-submenu1 {
display: block;
}
display:noneでアニメーションする方法はありますが、開くときはアニメーション。閉じるときはアニメーションできません。
CSSの例
navi-menu-submenu1 {
display: none;
height: 0;
opacity: 0;
}
navi-menu-input-submenu1:checked ~ #navi-menu-submenu1 {
display: block;
height: 184px;
opacity: 1;
animation-duration: 0.7s;
animation-name: fade-in;
}
@keyframes fade-in {
0% {display:block;opacity:0;height:0;}
100% {display:block;opacity:1;height:184px;}
}
