Detaillierte Erläuterung der Schritte der Ein- und Ausblendeffektfunktion der nativen JS-Kapselung

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte der nativen JS-gekapselten Ein- und Ausblendeffektfunktion geben. Was sind die Vorsichtsmaßnahmen für die native JS-gekapselte Ein- und Ausblendung? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Wenn es um die Verlaufsanzeige und das Verschwinden von js geht, werden die meisten Freunde an fadeIn(), fadeOut() oder fadeToggle() in JQuery denken. Was aber, wenn die riesige JQuery-Bibliothek nur aufgerufen wird, um einen solchen Effekt einzuführen? Mit anderen Worten, ich habe mich verbessert, indem ich natives JS verwendet habe, um einige Funktionen zu implementieren ~

Also habe ich kurz die Auswirkung des Schreibens von Ein- und Ausblendungen in reinem JS-Code untersucht.

Wenn ein Fehler vorliegt, weisen Sie ihn bitte in den Kommentaren darauf hin, damit ich meine eigenen Fehler korrigieren kann

(1 ) FadeIn Der Ein- und Ausblendeffekt der Funktion

ist eigentlich ein setInterval(), gepaart mit der zyklischen DOM-Operation kann dies erreicht werden durch Ändern der Transparenz des Elementobjektknotens.

Also extrahieren wir zwei notwendige Dinge: setInterval(), Opazität und Geschwindigkeit.

• Geschwindigkeit: Dies ist die Änderungsgeschwindigkeit des Gleitkommawerts, wenn wir den Deckkraftwert von 0 auf 1 setzen.

• Die Logik des Einblendens: Der Deckkraftwert ändert sich vom Float-Wert von 0 auf 1.

• 
  

Schauen wir uns zunächst die Code-Implementierung an!

html:

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

CSS-Stil

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

Schauen wir uns zunächst an, wie die erste Version der FadeIn-Funktion geschrieben wird: Verstehen Sie zunächst die Implementierungsidee

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

Wenn dieser Effekt vorübergehend erreicht wird, sind manche Dinge nicht so einfach. Wenn mehrere Triggereffekte auftreten, wird setInterval mehrmals gleichzeitig verwendet, was zu einigen problematischen Fehlern führt.

Um dieses Problem zu lösen, gibt es derzeit eine Lösung: Fügen Sie einen globalen Status hinzu, um zu verhindern, dass setInterval mehrmals ausgelöst wird.

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);
  }
}

Kompatibilitätsproblem! ! !

Schauen Sie sich zuerst den Code an

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

Hinweis: Der Code setzt num/100, da wir ie als Standard verwenden, um mit ff und GG kompatibel zu sein

Set DOM-Knoten in jsFunktionsattribut der Transparenz: filter= "alpha(opacity=" + value+ ")" (kompatibel mit IE)

Der Filterbereich von IE beträgt 0~100

Opazität=Wert/100 (kompatibel mit FF und GG).

Die Deckkraft von FF und GG beträgt 0~1 (um mit dem Filterbereich von z. B. kompatibel zu sein, verwenden wir num/100)

(2) FadeOut-Funktion

Geschwindigkeit: Dies ist die Geschwindigkeit, mit der sich der Float-Wert ändert, wenn wir den Deckkraftwert von 1 auf 0 setzen (denken Sie an die Kompatibilität)

Ausblenden Logik: Der Deckkraftwert ändert sich von 1 auf 0. Der Float-Wert ändert sich.

Verpackungsfunktion

(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;
})();

Testbeispiel:

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();
 }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung des React-Native-Paket-Plug-In-Swipers

FIFO/LRU-Implementierung des Caching-Algorithmus

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte der Ein- und Ausblendeffektfunktion der nativen JS-Kapselung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!