如何在Vue组件中使用<transition-group>？

Question

假设我想使用组件创建一个列表，当我点击它时，它将消失，并使用 transition-group 进行动画处理。

以下代码可以良好地执行：

HTML：

<transition-group name="testanim">
  <p key="1" v-if='open1' @click='open1 = false'>Can You See Me?</p>
  <p key="2" v-if='open2' @click='open2 = false'>Can You See Me?</p>
</transition-group>

CSS：

.testanim-enter-active, .testanim-leave-active {
  transition: all .5s;
}
.testanim-enter, .testanim-leave-to {
  transform: translateX(1rem);
  opacity: 0;
}
.testanim-leave-active {
  position: absolute;
}
.testanim-move {
  transition: all .5s;
}

open1和open2在Vue.js的data中定义。

然而，以下代码不会执行任何动画。

HTML:

<transition-group name="testanim">
  <test-sth key="1"></test-sth>
  <test-sth key="2"></test-sth>
</transition-group>

CSS：与上面相同

JavaScript：

Vue.component ("test-sth", {
  template: "<p v-if='open' @click='open = !open'>Can You See Me?</p>",
  data: function () {
    return {
      open: true,
    }
  }
})

所以问题是如何在transition-group内部对组件进行动画。我搜索了几个小时，但没有找到相关的问题或文档。

更新：

关键问题在于，在前面的示例中，当第一句话消失时，第二句话平滑地向上移动的动画不会显示在后面的示例中。虽然我可以将transition放在template内部，但这并不能解决问题。我应该在template内编写整个transition-group，还是其他什么方法...？

- HaveaLooker

Answer 1

当使用Vue过渡效果时，由于内部原因，转换/转换组件必须与被切换的状态位于同一模板中。此外，Vue组件要求始终存在单个根元素。v-if违反了这个规则，因为如果v-if是false，则可能没有该元素存在。要解决此问题，请将过渡效果移动到test-sth组件中。由于它管理自己的切换，因此也应该管理自己的过渡效果。

Vue.component("test-sth", {
  template: `
    <transition name='testanim'>
      <p v-if='open' @click='open = !open'>Can You See Me?</p>
    </transition>
  `,
  data: () => ({
    open: true,
  }),
})

new Vue({
  el: "#app",
  template: `
    <div>
      <test-sth></test-sth>
      <test-sth></test-sth>
    </div>
  `,
})

查看这个fiddle以获取一个可用的示例。

- kingdaro

---

抱歉问题描述不够清晰，但实际问题是 v-move 部分的动画效果... 我会尽快更新问题。 - HaveaLooker