Saya menggunakan Vue untuk menghidupkan kotak teks yang bergerak ke atas dan pudar masuk apabila tetikus melayang di atas imej. Animasi adalah betul, tetapi terdapat sedikit kelewatan sebelum ia bermula. Saya mahu kotak teks lancar dan serta-merta mula pudar masuk dan bergerak ke atas apabila imej dilegar. Kotak teks dengan betul pudar dan bergerak ke bawah apabila kursor pergi.

template: ` 
 
   
{{ lencana[item].keterangan }}
  
 
 `, kaedah:{ hoverStart(i){ this.hoveredIndex = i; }, hoverEnd(){ this.hoveredIndex = null; } },

.ikon atribut { jidar atas: 5px; jawatan:saudara; kelewatan peralihan: 0s; img { lebar: 28px; ketinggian: 28px; jidar-kanan: 8px; peralihan: 0.24s; kelewatan peralihan: 0s; } p { jawatan: mutlak; atas: 20px; lebar: 19vw; lebar maksimum: 350px; lebar min: 175px; latar belakang: #0088ce; warna: #ffffff; indeks-z: 1; jejari sempadan: 5px; padding: 5px 10px; bayang-kotak: 0 0 18px rgba(2, 2, 2, 0.14); pointer-events: tiada; berat fon: 500; saiz fon: 13px; peralihan: 0.24s mudah; kelewatan peralihan: 0s; @media(lebar maksimum:1100px){ lebar: 25vw; } @media(lebar maksimum:991px){ lebar: 36vw; } } .v-masuk-daripada{ kelegapan: 0; transform: translateY(10px); peralihan: kelegapan 0.24s memudahkan, mengubah 0.24s memudahkan; kelewatan peralihan: 0s; }; .v-masuk-aktif{ kelewatan peralihan: 0s; peralihan: kelegapan 0.24s memudahkan, mengubah 0.24s memudahkan; transform: translateY(4px); }; .v-enter-to{ }; .v-tinggalkan-daripada{ transform: translateY(10px); }; .v-cuti-aktif{ peralihan: kelegapan 0.24s memudahkan, mengubah 0.24s memudahkan; transform: translateY(10px); }; .v-tinggalkan-ke{ kelegapan:0; };

我尝试给所有元素添加penangguhan peralihan: 0s，但没有起作用。