Open4

Yamada UIでSonnerみたいなNoticeコンポーネントを作る

taroj1205taroj1205

CSSで子要素を全て重ねるCSS

gridTemplateRows: repeat(var(--length), 0%);

上のCSSを使ってCSSで子要素を並べるCSS
上からの切り替えでもアニメーションも使えるようにする

gridTemplateRows: repeat(var(--length), calc(100%/var(--length)));
taroj1205taroj1205
transition: --length 0.5s ease-in-out;

でlengthが変わってもアニメーションできるが、repeat()で繰り返しているので正しい動作をしてくれない

taroj1205taroj1205

gridを使うのではなくflexでmargin-top: -...remで重ねることもできるが、Noticeコンポーネントの高さが変わったときに重なり方が変わってしまう。