Gibt es eine Lösung für das Problem, dass die Schriftart bei einer Verzögerung von 200 ms schneller in der Maske erscheint?

Um dieses Problem zu lösen, können Sie die von Vue.js bereitgestellte transitionAnimationskomponente verwenden. Indem Sie divdas Tag transitionin eine Komponente einschließen, können Sie mithilfe von CSS-Übergangseffekten steuern, wie Textinhalte und Bilder angezeigt werden.

Führen Sie zunächst die Komponente in die Vorlage ein transition:

HTMLCopy-Code

<transition name="fade"> 
<div class="nothing" v-if="result.length == 0">
 <img src="@public/img/interest/nothing.png" alt=""> 
<span class="nothing_text">暂时还没有通知</span>
 </div> 
</transition>

Verwenden Sie dann CSS, um die folgende fadeÜbergangsklasse zu definieren:

cssCode kopieren

.fade-enter-active, .fade-leave-active { 

transition: opacity 0.5s; 
} 



.fade-enter, .fade-leave-to { 

opacity: 0; 
}

Dieser Code definiert eine fadeÜbergangsklasse mit dem Namen, die den Animationseffekt des Erscheinens und Verschwindens des Elements steuert. Konkret werden 0,5 Sekunden verwendet, um die Verlaufsanimation durchzuführen , wenn ein Element in die Ansicht ( enter) eintritt oder die Ansicht verlässt ( ).leave

Schließlich müssen Sie setup()die Verzögerungslogik in der Funktion der Vue-Komponente entfernen und resultdie Variable in den entsprechenden Zustand versetzen, um das Erscheinen und Verschwinden des Übergangseffekts auszulösen.

JavascriptCode kopieren

export default { 
setup() { 
const result = ref([]) 
return {
 result
 } 
}
 }

Hierbei wird davon ausgegangen, dass es resultsich bei der Variablen um eine reaktive Variable handelt, die entsprechend Änderungen in der Geschäftslogik dynamisch aktualisiert wird. result.length == 0Wenn , wird die Komponente angezeigt und fadedie Übergangsklasse wird zur Steuerung ihres Animationseffekts verwendet.