列表转换仅适用于“进入”而不适用于“离开”

Question

在the example in the docs 之后，我使用transition-group 作为项目列表。奇怪的是，它在项目出现时起作用（enter），而不是在它们消失时（leave），这意味着它们在出现时以动画方式向下滑动，但在没有动画的情况下立即消失：leave 动画失败。为什么？

<template>
  <div v-if="notifications.length">
    <transition-group name="notifications">
      <span
        v-for="notification in notifications"
        :key="notification.id"
      >
        <!-- content -->
      </span>
    </transition-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      notifications: state => state.notifications.notifications
    })
  }
}
</script>

<style lang="scss" scoped>
.notifications-enter-active,
.notifications-leave-active {
  transition: all 0.5s;
}

.notifications-enter {
  transform: translateY(-100%);
}
.notifications-leave-to {
  opacity: 0;
}
</style>

商店

export const mutations = {
  DELETE_NOTIFICATION (state, id) {
    state.notifications.splice(
      state.notifications.findIndex(item => item.id === id),
      1
    )
  }
}

Answer 1

我无法使用该代码 (demo 1) 重现确切的症状，在您的场景中，它只会在 leave 而不是 enter 上转换。原因是span 是display: inline，这会阻止转换。

Vue 文档为此提供了一个提示：

重要的一点是，这些 FLIP 转换不适用于设置为 display: inline 的元素。作为替代方案，您可以使用 display: inline-block 或将元素放在 flex 上下文中。

所以，您可以在transition-group 上申请display: flex：

<template>
  <transition-group class="container">
    ...
  </transition-group>
</template>

<style>
.container {
  display: flex;
}
</style>

demo 2

或display: inline-block 上的span 进行转换：

<template>
  <span class="notification-item">
    ...
  </span>
</template>

<style>
.notification-item {
  display: inline-block;
}
</style>

demo 3

Answer 2

原来用<div v-if="notifications"> 替换<div v-if="notifications.length"> 转换现在可以工作了。尽管这对我没有任何意义。

如果有人能在评论中解释一下就好了:)