VueJs and transition

Question

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 class="submain" v-if="onShow">
  <div class="mainSub">
    <div class="info">
      <h5>Decision</h5>
      <div class="infoDetails">{{ pass.decision }}</div>
    </div>
    <div v-for="item in pass.motif" :key="item" class="info">
      <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 class="info">
      <h5>Score</h5>
      <div class="infoDetails">{{ pass.score }}</div>
    </div>
  </div>
  <div class="mainSub">
    <div class="info">
      <h5>No emp</h5>
      <div class="infoDetails">{{ pass.noEmp }}</div>
    </div>
    <div class="info">
      <h5>Seq</h5>
      <div class="infoDetails">{{ pass.seq }}</div>
    </div>
    <div class="info">
      <h5>Limit Type</h5>
      <div class="infoDetails">{{ pass.limitType }}</div>
    </div>
    <div class="info">
      <h5>Type produit</h5>
      <div class="infoDetails">{{ pass.productType }}</div>
    </div>
    <div class="info">
      <h5>Type crédit</h5>
      <div class="infoDetails">{{ pass.creditType }}</div>
    </div>
    <div class="info">
      <h5>Decision</h5>
      <div class="infoDetails">{{ pass.decision2 }}</div>
    </div>
    <div class="info">
      <h5>Motif</h5>
      <div class="infoDetails">{{ pass.motif2 }}</div>
    </div>
    <div class="info">
      <h5>Product Grade</h5>
      <div class="infoDetails">{{ pass.productGrade }}</div>
    </div>
    <div class="info">
      <h5>Approved Limit - Offer 1</h5>
      <div class="infoDetails">{{ 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 !

Answer 1

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

your demo