VueJs 和过渡

Question

我有几个由 v-for 渲染的子组件

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

在那些里面，我有转换标签

<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%);
}

目前进入动画无法正常工作，无法找出原因。我是 Vue 的新手，对 Vue transition and animation 更是如此。

最后，我想让子组件“自行部署”，而不是在将组件推到它们下面时滑入。

“翻译”至少是为了让某些东西发挥作用。

谢谢！

Answer 1

尝试使用 .onShow-enter-from 而不是 .onShow-enter

your demo

VueJs 和过渡

VueJs and transition

javascript

css-transitions

vue.js

vuejs3