Ich verwende Vue, um ein Textfeld zu animieren, das nach oben verschoben und eingeblendet wird, wenn die Maus über einem Bild schwebt. Die Animation ist korrekt, es gibt jedoch eine leichte Verzögerung, bevor sie startet. Ich möchte, dass das Textfeld reibungslos verläuft und sofort eingeblendet und nach oben verschoben wird, wenn der Mauszeiger über das Bild bewegt wird. Das Textfeld wird ordnungsgemäß ausgeblendet und nach unten verschoben, wenn der Cursor weggeht.

template: ` 
 
  <Übergang> 
{{ Badges[item].description }}
  
 
 `, Methoden:{ hoverStart(i){ this.hoveredIndex = i; }, hoverEnd(){ this.hoveredIndex = null; } },

.attribute-icons { Rand oben: 5px; Position:relativ; Übergangsverzögerung: 0s; img { Breite: 28px; Höhe: 28px; Rand rechts: 8px; Übergang: 0,24 s; Übergangsverzögerung: 0s; } P { Position: absolut; oben: 20px; Breite:19vw; maximale Breite: 350 Pixel; Mindestbreite: 175 Pixel; Hintergrund: #0088ce; Farbe: #ffffff; Z-Index: 1; Randradius: 5px; Polsterung: 5px 10px; Box-Shadow: 0 0 18px rgba(2, 2, 2, 0,14); Zeigerereignisse: keine; Schriftstärke: 500; Schriftgröße: 13px; Übergang: 0,24 s Leichtigkeit; Übergangsverzögerung: 0s; @media(max-width:1100px){ Breite:25vw; } @media(max-width:991px){ Breite:36vw; } } .v-enter-from{ Deckkraft: 0; transform: TranslateY(10px); Übergang: Deckkraft 0,24 Sekunden, Transformation 0,24 Sekunden; Übergangsverzögerung: 0s; }; .v-enter-active{ Übergangsverzögerung: 0s; Übergang: Deckkraft 0,24 Sekunden, Transformation 0,24 Sekunden; transform: TranslateY(4px); }; .v-enter-to{ }; .v-leave-from{ transform: TranslateY(10px); }; .v-leave-active{ Übergang: Deckkraft 0,24 Sekunden, Transformation 0,24 Sekunden; transform: TranslateY(10px); }; .v-leave-to{ Deckkraft:0; };

我尝试给所有元素添加transition-delay: 0s，但没有起作用.