javascript原生封裝一個淡入淡出效果的函式

thomaszhou發表於2019-03-03
JavaScript封裝函式

說到js的漸變顯示與消失，多數朋友會想到JQuery裡面的fadeIn()、fadeOut()或fadeToggle()。但如果僅僅是為了引入這樣的一個效果，而去呼叫了龐大JQuery庫？或者說我通過用原生js實現一些函式來提高自己~

所以，我簡單的研究了一下純js程式碼寫淡入淡出的效果。

如果出現錯誤，請在評論中指出，我也好自己糾正自己的錯誤

javascript原生封裝一個淡入淡出效果的函式

author： thomaszhou

（一）FadeIn淡入函式

淡入淡出的效果，其實就是一個setInterval()，加上迴圈的DOM操作，通過改變element物件節點的透明度，即可實現這種效果。

所以我們提取出兩個必要的東西：setInterval()、opacity、以及speed。

  • speed： 這個是我們設定opacity的值從0到1的float數值變化速度
  • 淡入的邏輯：opacity的值從0到1的float數值變化。

我們來先看程式碼實現！

html:

<div id="div1"></div>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>
複製程式碼

css樣式

	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: #1d7db1;
			opacity:0;
		}
	</style>
複製程式碼

首先我們來看fadeIn函式的第一版的寫法：先了解一下實現的思路

function fadeIn(ele, speed) {
   let num = 0;
   let time = setInterval(() => {
        num += speed;
        ele.style.opacity = num / 100;
        if (num >= 100) {
          clearInterval(time);  // 清除定時器
        }
	  }, 30);
    }
}
複製程式碼

當這個效果暫時實現以後，有些東西並沒有那麼簡單。如果發生多次的觸發效果，會出現setInterval被多次同時使用，出現一些讓人頭疼的BUG。

要解決這個問題，目前有一個方案：新增一個全域性狀態，防止多次觸發setInterval。

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);
    }
}
複製程式碼

相容性問題！！！

先看程式碼

set: function(elem, num) {
    elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = `alpha(opacity = `+ num +`)`;
}
複製程式碼

注：程式碼設定num/100是因為我們以ie為標準去相容ff和GG

js裡面設定DOM節點透明度的函式屬性：filter= “alpha(opacity=” + value+ “)”（相容ie）

ie的filter範圍是0~100

opacity=value/100（相容FF和GG）。

FF和GG的opacity是0~1 （為了相容ie的filter範圍，我們用num/100）

（二）FadeOut淡出函式

  • speed： 這個是我們設定opacity的值從1到0的float數值變化速度（記得考慮相容性）
  • 淡出的邏輯：opacity的值從1到0的float數值變化。

封裝函式

(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;
})();
複製程式碼

測試例項：

  let btn = document.getElementsByTagName(`button`)[0];
  let btn2 = document.getElementsByTagName(`button`)[1];
  btn.onclick = () => {
    let fade = new Fade(`div1`);
	fade.fadeIn();
  };
  btn2.onclick = () => {
    let fade = new Fade(`div1`);
    fade.fadeOut();
  }
複製程式碼

相關文章