집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.

JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.

小云云원래의: 2018-03-20 09:13:022125검색

js의 그래디언트 표시 및 사라짐에 대해 말하면 대부분의 친구들은 JQuery의 fadeIn(), fadeOut() 또는 fadeToggle()을 생각할 것입니다. 하지만 단지 그러한 효과를 도입하기 위해 거대한 JQuery 라이브러리를 호출한다면 어떻게 될까요? 즉, 몇 가지 기능을 네이티브 js를 사용하여 구현하면서 실력이 향상되었습니다~

그래서 순수 js 코드에서 페이드인, 페이드아웃을 작성할 때의 효과에 대해 간략하게 연구해보았습니다.

오류가 있으면 댓글로 지적해주시면 제가 직접 수정하도록 하겠습니다

(1) FadeIn 페이드인 기능

페이드인과 페이드아웃 효과는 실제로 setInterval()입니다. add 이 효과는 이전 루프의 DOM 작업을 통해 요소 개체 노드의 투명도를 변경하여 얻을 수 있습니다.

그래서 우리는 setInterval(), 불투명도 및 속도라는 두 가지 필수 항목을 추출합니다.

속도: 불투명도 값의 부동 소수점 값이 0에서 1로 변경되도록 설정하는 속도입니다.
페이드 인 논리: 불투명도 값의 부동 소수점 값이 0에서 1로 변경됩니다.

먼저 코드 구현을 살펴보겠습니다!

html:

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

css style

<style>
 p {
  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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
}

참고: 코드는 ff 및 GG와 호환되는 표준으로 ie를 사용하기 때문에 num/100을 설정합니다.

js에서 DOM 노드 투명도를 설정하는 함수 속성: filter= "alpha(opacity=" + value+ ")" (ie와 호환 가능)

ie의 필터 범위는 0~100

opacity=value/100(FF 및 GG와 호환 가능)입니다.

FF와 GG의 불투명도는 0~1입니다(즉, 필터 범위와 호환되도록 num/100을 사용합니다)

(2) FadeOut 기능

speed: 이것은 불투명도를 설정한 값 부동 소수점 값이 1에서 0으로 변경되는 속도(호환성을 고려해야 함)

페이드 아웃 논리: 불투명도 값이 부동 소수점 값에서 1에서 0으로 변경됩니다.

캡슐화된 함수

(function() {
  let fadeFlag = true;
  function Fade(selector) {
    this.elem = typeof selector == &#39;Object&#39; ? selector : document.getElementById(selector);
  }
  Fade.prototype = {
   constructor: Fade,
    setOpacity: (elem, opacity) => { // 兼容ie10—
      elem.filters ? elem.style.filter = &#39;alpha(opacity = &#39;+ opacity +&#39;)&#39;:  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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
   },
    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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
          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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
          if (num <= opacity) {
          clearInterval(time);
          fadeFlag = true;
          }
        }, 20);
      }
    }
  };
window.Fade = Fade;
})();

테스트 예:

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

JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.

관련 기사