Vue 3 嵌套转换不起作用，没有错误答案

【问题标题】：Vue 3 nested transition not working, no errorVue 3 嵌套转换不起作用，没有错误
【发布时间】：2022-01-26 11:45:47
【问题描述】：

我有这个 Vue3 根组件，显示一个组列表，其中每个组可以有 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>

如果我删除一个组，它会向右滑出。但是，删除条目不会动画。它只是被删除了。

知道出了什么问题吗？

【问题讨论】：

可以把codesanbox中的所有代码都添加到这里吗？
不得不使用 StackBlitz 因为我正在使用 vite stackblitz.com/edit/vite-pxv4rp 删除条目有时会动画，有时不会。

标签： vue.js css-animations vuejs3 vue-transitions

【解决方案1】：

有一个 ul 只是删除了整个 transition-group 所以当你删除最后一个元素时，你看不到转换，因为<ul class="ml-4" v-if="item.entries.length > 0"> 删除了整个组。

您可以只删除v-if="item.entries.length > 0" 部分并让它transtion-group 呈现0 个项目。

<template>
  <ul>
    <transition-group
      appear
      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.id)">
              <i class="fas fa-trash"></i>
            </a>
          </div>
        </div>
        <ul class="ml-4">
          <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>

【讨论】：