我有这个 Vue3 Root 组件,显示了一个组列表,其中每个组可以有 n 个条目。
<script setup lang="ts">
import EntryItem from '../components/EntryItem.vue';
let groups = [
{
name:'Foo'
entries:[
{
name:'Bar'
},
{
name:'FooBar'
}
]
}
];
let deleteGroup = group => {
groups.filter(item => item.name != group)
};
</script>
<template>
<ul>
<transition-group name="groups" tag="div" enter-active-class="bounceInDown" leave-active-class="slideOutRight">
<li
v-for="(item, index) in groups"
class="my-2 px-4 py-2 rounded shadow"
:key="`root_${item.name}`">
<div class="flex justify-between">
<div>{{ item.name }}</div>
<div>
<a href="#" class="ml-2" @click.prevent="deleteGroup(item.name)">
<i class="fas fa-trash"></i>
</a>
</div>
</div>
<ul class="ml-4" v-if="item.entries.length > 0">
<transition-group name="entries" tag="div" enter-active-class="bounceInDown" leave-active-class="slideOutRight">
<EntryItem v-for="entry in item.entries" :key="`entry_${entry.name}`" :entry="entry" />
</transition-group>
</ul>
</li>
</transition-group>
</ul>
</template>
<style scoped>
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
animation-duration: 0.7s;
animation-fill-mode: both;
animation-name: bounceInDown;
}
@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-name: slideOutRight;
}
</style>
EntryItem 组件呈现每个组的条目。删除条目后,这也应该向右滑出。
<script setup lang="ts">
let deleteEntry = name => {
entry.filter(item => item.name != name) }
};
const props = defineProps(['entry']);
</script>
<template>
<li>
<div class="flex justify-between">
<div>
{{ entry.name }}
</div>
<div>
<a href="#" @click.prevent="deleteEntry(entry.name)"><i class="fas fa-trash"></i></a>
</div>
</div>
</li>
</template>
<style scoped>
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
animation-duration: 0.7s;
animation-fill-mode: both;
animation-name: bounceInDown;
}
@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-name: slideOutRight;
}
</style>
如果我删除一个组,它会向右滑出。但是,删除条目不会动画。它只是被删除了。
知道出了什么问题吗?