Vue 3 嵌套过渡不起作用，没有错误

Question

我有这个 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>

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

知道出了什么问题吗？

Answer 1

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

您可以只删除 v-if="item.entries.length > 0" 部分并让它转换组呈现 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>

Vue 3 嵌套过渡不起作用，没有错误

Vue 3 nested transition not working, no error

css-animations

vue.js

vue-transitions

vuejs3