javascript - ¿Cómo funciona <transition-group> con Vue.components?

Supongamos que quiero usar los componentes para hacer una lista que desaparecería si hago clic en ella, y usar el transition-group para hacer la parte de la animación.

El siguiente código puede funcionar bien:

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 y open2 están definidos en data en Vue.js.

Sin embargo, el siguiente código no realizaría la animación en absoluto.

HTML :

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

CSS: lo mismo que lo anterior

JavaScript :

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

Entonces el problema es cómo puedo animar los componentes dentro del transition-group. He buscado durante unas horas pero no encontré ninguna pregunta o documento relacionado con ello.

Actualizar :

El problema clave es que la animación en el primer ejemplo en el que la segunda oración se mueve hacia arriba suavemente cuando la primera oración desaparece no se muestra en el segundo. Aunque pueda poner el transition dentro del template, eso no soluciona el problema. ¿Debería escribir todo el transition-group dentro del template, o algo más...?

Respuesta #1

Al usar transiciones de Vue, por razones internas, los componentes transition/transition-group deben estar en la misma plantilla que el estado que se está alternando.

Además, los componentes de Vue requieren que siempre haya un único elemento raíz para un componente. Un v-if rompe esta regla porque da la posibilidad de que el elemento no esté presente, si el v-if resulta ser falso.

Para resolver su problema, mueva la transición al componente test-sth. Dado que maneja su propio cambio, también debería manejar su propia transición.

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>
  `,
})

Vea este fiddle para un ejemplo funcionando.