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 !

What's the "onShow" boolean? Do you except the component to animate when the scoringPass list is updated, or when the onShow boolean switches inside each component? — Kapcash
– Kapcash, Commented Apr 30, 2022 at 10:24
The onShow boolean is to display the child component and I want the animation to launch when the boolean = true. It becomes true when you use the onShowClick method. — Specialka
– Specialka, Commented Apr 30, 2022 at 10:28
Ok, in the inspector, do you see some classes applied when you click your button? Also, does the <transition> element has only one child element or several? — Kapcash
– Kapcash, Commented Apr 30, 2022 at 10:30
And in the inspector, I can only see the class added by the transition itself. — Specialka
– Specialka, Commented Apr 30, 2022 at 10:37

Nikola Pavicevic · Accepted Answer · 2022-04-30 11:25:28Z

1

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

your demo

answered Apr 30, 2022 at 11:25

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Specialka Over a year ago

That did it for the enter transition. Thanks ! Do you know how I could make it "deploy" rather than slide in ?

Collectives™ on Stack Overflow

VueJs and transition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related