display:gridを使いheight: autoでcss transitionする方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease-out; } .wrapper.is-open { grid-template-rows: 1fr; } .inner { overflow: hidden; } </style> <div class="wrapper"> <div class="inner">Expandable content</div> </div> |
参考サイト: Transitioning to height auto (two ways) – Keith J. Grant