I am using a v-for to render multiple child components:
<div v-for="(pass) in scoringPass" :key="pass.decision">
<Pass :pass="pass"/>
</div>
Each of these child components contains a 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>
</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%);
}
The enter animation is not functioning as expected, and I am struggling to identify the issue. As a newcomer to Vue and especially Vue transitions and animations, it's proving challenging.
My goal is for the child components to "deploy themselves" rather than simply sliding in and pushing down below components.
I attempted using "translate" to troubleshoot the issue.
Any assistance would be greatly appreciated!