VueJs and transition-CodePudding

I have several child components rendered by a v-for

<div v-for="(pass) in scoringPass" :key="pass.decision">
    <Pass :pass="pass"/>
  </div>

And inside those, I have the transition tag

<template>
<h4 @click="onShowClick">Scoring Pass {{ pass.index }}</h4>
  <transition name="onShow">
<div  v-if="onShow">
  <div >
    <div >
      <h5>Decision</h5>
      <div >{{ pass.decision }}</div>
    </div>
    <div v-for="item in pass.motif" :key="item" >
      <h5>Motif</h5>
      <div>
        <div>Emprunteur : {{ item.emprunteur }}</div>
        <div>Membre du groupe : {{ item.groupMember }}</div>
        <div>Grille de pouvoirs : {{ item.powerGrid }}</div>
        <div>Info : {{ item.info }}</div>
        <div>Info : {{ item.info2 }}</div>
        <div>Score B : {{ item.score }}</div>
      </div>
    </div>
    <div >
      <h5>Score</h5>
      <div >{{ pass.score }}</div>
    </div>
  </div>
  <div >
    <div >
      <h5>No emp</h5>
      <div >{{ pass.noEmp }}</div>
    </div>
    <div >
      <h5>Seq</h5>
      <div >{{ pass.seq }}</div>
    </div>
    <div >
      <h5>Limit Type</h5>
      <div >{{ pass.limitType }}</div>
    </div>
    <div >
      <h5>Type produit</h5>
      <div >{{ pass.productType }}</div>
    </div>
    <div >
      <h5>Type crédit</h5>
      <div >{{ pass.creditType }}</div>
    </div>
    <div >
      <h5>Decision</h5>
      <div >{{ pass.decision2 }}</div>
    </div>
    <div >
      <h5>Motif</h5>
      <div >{{ pass.motif2 }}</div>
    </div>
    <div >
      <h5>Product Grade</h5>
      <div >{{ pass.productGrade }}</div>
    </div>
    <div >
      <h5>Approved Limit - Offer 1</h5>
      <div >{{ pass.approvedlimit }}</div>
    </div>
  </div>
</div>
</transition>
</template>

CSS :

.onShow-leave-active,
.onShow-enter-active {
transition: 0.5s;
}
.onShow-enter {
transform: translateY(100%);
}
.onShow-leave-to {
transform: translateY(-100%);
}

Currently the enter animation is not working and can't figure out why. I am new with Vue and even more so with Vue transition and animation.

In the end, I would like to have the child components "deploying themselves" instead of sliding in while pushing the component below them.

The "translate" was for trying to make something working at least.

Thank you !

CodePudding user response：

try with .onShow-enter-from instead of .onShow-enter

your demo