<transition-group> 如何与 Vue.components 一起工作？

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并在 Vue.jsopen2中定义。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，那并不能解决问题。我应该把整个写在transition-group里面template，还是别的什么……？

Answer 1

使用 Vue 转换时，出于内部原因，转换/转换组组件必须与正在切换的状态位于同一模板中。

此外，Vue 组件要求组件始终有一个根元素。Av-if打破了这条规则，因为它给出了元素不存在的可能性，如果v-if恰好是假的。

要解决您的问题，请将过渡移动到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>
  `,
})

有关工作示例，请参阅此小提琴。