Explication détaillée des étapes de la fonction d'effet de fondu d'entrée et de sortie de l'encapsulation JS native

Cette fois, je vais vous apporter une explication détaillée des étapes de la fonction d'effet de fondu d'entrée et de fondu encapsulé en JS natif. Quelles sont les précautions pour le fondu d'entrée et de fondu encapsulé en JS natif. -fonction d'effet de sortie. Voici un cas pratique, jetons un coup d'oeil.

En ce qui concerne l'affichage du dégradé et la disparition de js, la plupart des amis penseront à fadeIn(), fadeOut() ou fadeToggle() dans JQuery. Mais que se passerait-il si l’immense bibliothèque JQuery était appelée uniquement pour introduire un tel effet ? En d'autres termes, je me suis amélioré en utilisant du js natif pour implémenter certaines fonctions~

Ainsi, j'ai brièvement étudié l'effet de l'écriture de fondus d'entrée et de sortie dans du code js pur.

S'il y a une erreur, merci de me la signaler dans les commentaires afin que je puisse corriger mes propres erreurs

(1 ) FadeIn L'effet de fondu d'entrée et de sortie de la fonction

est en fait un setInterval(), couplé à l'opération DOM cyclique, cela peut être obtenu par changer la transparence du type d'effet de nœud d'objet élément.

Nous extrayons donc deux choses nécessaires : setInterval(), l'opacité et la vitesse.

• vitesse : Il s'agit de la vitesse de changement de la valeur flottante lorsque nous définissons la valeur d'opacité de 0 à 1.

• La logique du fondu entrant : la valeur d'opacité passe de la valeur Float passe de 0 à 1.

• 
  

Regardons d'abord l'implémentation du code !

html :

<p id="p1"></p>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>

style CSS

<style>
 p {
  width: 100px;
  height: 100px;
  background-color: #1d7db1;
  opacity:0;
 }
 </style>

Tout d'abord, regardons comment écrire la première version de la fonction fadeIn : comprenez d'abord l'implémentation idée

function fadeIn(ele, speed) {
  let num = 0;
  let time = setInterval(() => {
    num += speed;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time); // 清楚定时器
    }
  }, 30);
  }
}

Lorsque cet effet est temporairement atteint, certaines choses ne sont pas si simples. Si plusieurs effets de déclenchement se produisent, setInterval sera utilisé plusieurs fois en même temps, provoquant des BUG gênants.

Pour résoudre ce problème, il existe actuellement une solution : ajouter un état global pour éviter que setInterval soit déclenché plusieurs fois.

let Fadeflag = true;
function fadeIn(ele, speed) {
  let num = 0;
  if (Fadeflag) {
  let time = setInterval(() => {
    num += speed;
    Fadeflag = false;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time);
     Fadeflag = true;
    }
  }, 30);
  }
}

Problème de compatibilité ! ! !

Regardez d'abord le code

set: function(elem, num) {
  elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')';
}

Remarque : le code définit num/100 car nous utilisons ie comme standard pour être compatible avec ff et GG

Défini dans jsAttribut de fonction DOM du nœud transparence : filter= "alpha(opacity=" + value+ ")" (compatible avec ie)

la plage de filtre d'ie est de 0~100

opacity=value/ 100 (compatible avec FF et GG).

L'opacité de FF et GG est de 0~1 (afin d'être compatible avec la plage de filtre, c'est-à-dire, nous utilisons num/100)

(2) Fonction FadeOut

vitesse : Il s'agit de la vitesse à laquelle la valeur flottante change lorsque nous définissons la valeur d'opacité de 1 à 0 (n'oubliez pas de prendre en compte la compatibilité)

FadeOut logique : la valeur d'opacité passe de 1 à 0. La valeur float change.

Fonction d'emballage

(function() {
  let fadeFlag = true;
  function Fade(selector) {
    this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
  }
  Fade.prototype = {
   constructor: Fade,
    setOpacity: (elem, opacity) => { // 兼容ie10—
      elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')':  elem.style.opacity = opacity / 100;
      return true;
   },
   setOpacity: function(num) {
      this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
   },
    fadeIn: function(speed, opacity){
   /*
   speed ==>淡入的速度，正整数（可选）;
   opacity ==>淡入到指定的透明度，0～100（可选）;
      */
      speed = speed || 2;
      opacity = opacity || 100;
      let num = 0; // 初始化透明度变化值为0
      if (fadeFlag) {
        let time = setInterval(() => {
          num += speed;
          fadeFlag = false;
          this.setOpacity(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
          if (num >= opacity) {
            clearInterval(time);
            fadeFlag = true;
          }
        }, 20);
      }
    },
    fadeOut: function(speed, opacity) {
   /*
   speed ==>淡入的速度，正整数（可选）;
   opacity ==>淡入到指定的透明度，0～100（可选）;
   */
      speed = speed || 2;
      opacity = opacity || 0;
      let num = 100; // 初始化透明度变化值为0
      if (fadeFlag) {
        let time = setInterval(() => {
          num -= speed;
          fadeFlag = false;
          this.set(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
          if (num <= opacity) {
          clearInterval(time);
          fadeFlag = true;
          }
        }, 20);
      }
    }
  };
window.Fade = Fade;
})();

Exemple de test :

let btn = document.getElementsByTagName('button')[0];
 let btn2 = document.getElementsByTagName('button')[1];
 btn.onclick = () => {
  let fade = new Fade('p1');
 fade.fadeIn();
 };
 btn2.onclick = () => {
  let fade = new Fade('p1');
  fade.fadeOut();
 }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres questions connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Explication détaillée des étapes d'utilisation du swiper du plug-in du package React-native

Implémentation FIFO/LRU d'algorithme de mise en cache

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!