Comment supprimer le délai de transition dans la transition Vue ?

Question

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.

modèle : `
            

                

                    
                    
                        
{{ badges[item].description }}
                    
                
            
        ',
        méthodes :{
            hoverStart(i){
                this.hoveredIndex = i;
            },
            hoverFin(){
                this.hoveredIndex = null ;
            }
        },
.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 ;
                    };
            

Answer 1

Dans Vue.js, transition组件允许您在元素插入、更新或从DOM中删除时添加过渡效果。默认情况下，Vue在元素插入或删除时应用过渡延迟，这给用户带来了更平滑的过渡效果。然而，如果您想去除过渡延迟，使元素立即出现或消失，您可以使用appearpropriétés ainsi que les propriétés de transition CSS.

Voici des exemples de la façon dont vous pouvez y parvenir :

1. Dans le modèle du composant Vue, utilisez le composant avec appear属性的transition :

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

2. Ajoutez le CSS d'effet de transition nécessaire dans la section de style de votre composant ou le CSS global :

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

Dans cet exemple, fade类被用作过渡名称，但您可以将其替换为任何您喜欢的类名。通过将transition属性设置为opacity 0.0s, vous supprimez en fait le délai de transition.

Gardez à l'esprit que si la suppression des délais de transition peut entraîner un changement visuel immédiat, elle peut également entraîner une expérience utilisateur plus abrupte. Les transitions sont souvent utilisées pour fournir une interface plus fluide et plus attrayante visuellement.

Gardez à l'esprit que le comportement de Vue peut changer avec le temps, alors assurez-vous de consulter la documentation officielle de Vue pour la version que vous utilisez pour obtenir les informations les plus précises et les plus à jour.