<p>J'utilise Vue pour animer une zone de texte qui monte et apparaît en fondu lorsque la souris survole l'image. L'animation est correcte, mais il y a un léger délai avant qu'elle ne démarre. Je souhaite que la zone de texte s'affiche en douceur et commence immédiatement à apparaître et à monter lorsque l'image est survolée. La zone de texte disparaît correctement et descend lorsque le curseur part. </p> <pre class="brush:php;toolbar:false;">modèle : ` <div> <div class="attribute-icons" v-for="(item, i) in techBadges" :key="'tech_' + i"> <img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="badges[item].imageSrc" :alt=" badges[élément].alt"/> <Transition> <p v-show="hoveredIndex === i">{{ badges[item].description }}</p> </Transition> </div> </div> ', méthodes :{ hoverStart(i){ this.hoveredIndex = i; }, hoverFin(){ this.hoveredIndex = null ; } },</pré> <pre class="brush:php;toolbar:false;">.attribute-icons { marge supérieure : 5 px ; position : relative ; délai de transition : 0 s ; img { largeur : 28px ; hauteur : 28px ; marge droite : 8 px ; transition : 0,24 s ; délai de transition : 0 s ; } p{ position : absolue ; haut : 20 px ; largeur : 19vw ; largeur maximale : 350 px ; largeur minimale : 175 px ; arrière-plan : #0088ce ; couleur : #ffffff ; indice z : 1 ; rayon de bordure : 5 px ; remplissage : 5px 10px ; box-shadow : 0 0 18px rgba(2, 2, 2, 0.14); événements de pointeur : aucun ; poids de la police : 500 ; taille de police : 13 px ; transition : facilité de 0,24 s ; délai de transition : 0 s ; @media(largeur maximale : 1 100 px){ largeur : 25 vw ; } @media(largeur maximale : 991 px){ largeur : 36 vw ; } } .v-enter-from{ opacité : 0 ; transformer: traduireY(10px); transition : opacité facilité 0,24 s, transformation facilité 0,24 s ; délai de transition : 0 s ; } ; .v-enter-active{ délai de transition : 0 s ; transition : opacité facilité 0,24 s, transformation facilité 0,24 s ; transformer: traduireY(4px); } ; .v-enter-to{ } ; .v-leave-from{ transformer: traduireY(10px); } ; .v-leave-active{ transition : opacité facilité 0,24s, transformation facilité 0,24s ; transformer: traduireY(10px); } ; .v-laisser-pour{ opacité : 0 ; };</pré> <p>

<template>
  <transition appear name="fade">
    <div v-if="showElement" class="element">要显示的元素</div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.0s; /* 将过渡延迟设置为0秒 */
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>