javascript - Ako funguje <transition-group> s Vue.components?

Predpokladajme, že chcem použiť komponenty na vytvorenie zoznamu, ktorý by zmizol, ak naň kliknem, a použiť transition-group na animovanie časti.

Nasledujúci kód môže podávať dobrý výkon:

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 a open2 sú definované v data vo Vue.js.

Avšak nasledujúci kód by animáciu vôbec nevykonal.

HTML :

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

CSS: to isté ako vyššie

JavaScript :

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

Takže problém je, ako môžem animovať komponenty vo vnútri transition-group. Hľadal som niekoľko hodín, ale nenašiel som žiadnu otázku ani dokumenty súvisiace s tým.

Aktualizácia:

Kľúčovým problémom je, že animácia v predchádzajúcom príklade, kde druhá veta sa hladko posúva nahor, keď prvá veta zmizne, sa v nasledujúcom nezobrazuje. Aj keď môžem dať transition do template, to problém nevyrieši. Mal by som napísať celý transition-group do template, alebo niečo iné...?

Odpoveď č. 1

Pri používaní prechodov Vue, z vnútorných dôvodov, komponenty transition/transition-group musia byť v tom istom šablóne ako stav, ktorý sa prepína.

Tiež, komponenty Vue vyžadujú, aby vždy existoval jediný koreňový element pre komponent. v-if porušuje toto pravidlo, pretože dáva možnosť, že element tam nebude, ak je v-if nepravdivý.

Na vyriešenie vášho problému presuňte prechod do komponentu test-sth. Keďže spravuje svoje vlastné prepínanie, malo by spravovať aj svoje vlastné prechody.

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

Pozrite si tento fiddle pre funkčný príklad.