Comment obtenir des effets de fondu entrant et sortant fluides en JavaScript et CSS ?

Fade-In et Fade-Out à l'aide de JavaScript et CSS

La création d'effets de fondu d'entrée et de sortie pour les éléments HTML peut améliorer la attrait visuel des applications Web. Cependant, la mise en œuvre de ces effets peut parfois s'avérer difficile, surtout lorsque la fonction de fondu entrant ne fonctionne pas correctement.

Dans une implémentation précédente, la fonction de fondu entrant n'augmentait pas l'opacité de l'élément comme prévu. Au lieu de cela, il est resté bloqué à 0,1. Pour résoudre ce problème, nous proposons une méthode plus efficace :

<code class="javascript">function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}</code>

Cette fonction commence avec une opacité initiale de 0,1 et l'incrémente progressivement jusqu'à ce qu'elle atteigne 1,0, ce qui entraîne un effet de fondu fluide.

Pour le fondu sortant, nous remplaçons le code ci-dessus par :

<code class="javascript">function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1) { // If opacity drops below 0.1
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}</code>

Cette fonction décrémente continuellement l'opacité jusqu'à ce qu'elle atteigne 0,1, puis masque l'élément pour créer l'effet de fondu souhaité.

N'oubliez pas qu'il est essentiel d'éviter d'utiliser des chaînes comme arguments pour setInterval ou setTimeout en raison de leurs risques potentiels pour la sécurité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!