How to remove transition delay in Vue transition?
P粉757432491
2023-08-17 17:36:49
<p>I'm using Vue to animate a text box that moves up and fades in when the mouse is hovering over the image. The animation is correct, but there is a slight delay before it starts. I want the text box to smoothly and immediately start fading in and moving up when the image is hovered. The text box properly fades out and moves down when the cursor leaves. </p>
<pre class="brush:php;toolbar:false;">template: `
<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[item].alt"/>
<Transition>
<p v-show="hoveredIndex === i">{{ badges[item].description }}</p>
</Transition>
</div>
</div>
`,
methods:{
hoverStart(i){
this.hoveredIndex = i;
},
hoverEnd(){
this.hoveredIndex = null;
}
},</pre>
<pre class="brush:php;toolbar:false;">.attribute-icons {
margin-top: 5px;
position:relative;
transition-delay: 0s;
img {
width: 28px;
height: 28px;
margin-right: 8px;
transition: 0.24s;
transition-delay: 0s;
}
p {
position: absolute;
top: 20px;
width:19vw;
max-width:350px;
min-width:175px;
background: #0088ce;
color: #ffffff;
z-index: 1;
border-radius: 5px;
padding: 5px 10px;
box-shadow: 0 0 18px rgba(2, 2, 2, 0.14);
pointer-events: none;
font-weight: 500;
font-size: 13px;
transition: 0.24s ease;
transition-delay: 0s;
@media(max-width:1100px){
width:25vw;
}
@media(max-width:991px){
width:36vw;
}
}
.v-enter-from{
opacity: 0;
transform: translateY(10px);
transition: opacity 0.24s ease, transform 0.24s ease;
transition-delay: 0s;
};
.v-enter-active{
transition-delay: 0s;
transition: opacity 0.24s ease, transform 0.24s ease;
transform: translateY(4px);
};
.v-enter-to{
};
.v-leave-from{
transform: translateY(10px);
};
.v-leave-active{
transition: opacity 0.24s ease, transform 0.24s ease;
transform: translateY(10px);
};
.v-leave-to{
opacity:0;
};</pre>
<p>我尝试给所有元素添加transition-delay: 0s，但没有起作用。</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In Vue.js, the
transitioncomponent allows you to add transition effects when an element is inserted, updated, or removed from the DOM. By default, Vue applies a transition delay when elements are inserted or removed, which gives users a smoother transition effect. However, if you want to remove the transition delay and make the element appear or disappear immediately, you can use theappearproperty along with the CSS transition property.Here are examples of how you can achieve this:
transitioncomponent with theappearattribute:<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>In this example, the
fadeclass is used as the transition name, but you can replace it with any class name you like. By setting thetransitionproperty toopacity 0.0s, you are actually removing the transition delay.Keep in mind that while removing transition delays may provide an immediate visual change, it may also result in a more abrupt user experience. Transitions are often used to provide a smoother and more visually appealing interface.
Keep in mind that the behavior of Vue may change over time, so be sure to consult the official Vue documentation for the version you are using for the most accurate and up-to-date information.