【Vue3】 transition-groupをtableで使う方法の忘備録

単純にtbodyのattrをこうする。

<tbody is="vue:transition-group" name="list" tag="tbody">

is="vue:transition-group" と tag="tbody"

tbodyに一回「transition-group」を認識させて、
またtag="tbody"に戻してる。
tableタグ構成を変にタグを入れると、うまく行かないのでこれでいける。

name="list"

nameはアクション。
今回はlistにしてるので

【taiwindやと】※@applyつかってるよ

.list-enter-active,
.list-leave-active { @apply transition duration-300 ease-out;}
.list-enter-from,
.list-leave-to { @apply opacity-0 transform translate-x-20;}

【css/sassやと】

.list-enter-active,
.list-leave-active {
    transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translate-x-20;
}

忘れないように忘備録。

これにDraggableとかdrag&dropが使えたら最強なんやけど、
いいのあるよーってかた教えてください。