집 > 기사 > 웹 프론트엔드 > 페이드인 및 페이드아웃 효과를 위한 JavaScript 기본 캡슐화 기능 테스트

페이드인 및 페이드아웃 효과를 위한 JavaScript 기본 캡슐화 기능 테스트

不言원래의: 2018-07-02 15:42:201444검색

이 글에서는 페이드인 및 페이드아웃 효과의 자바스크립트 네이티브 캡슐화 기능을 주로 소개하고 있는데 주로 FadeIn 페이드인 기능과 FadeOut 페이드아웃 기능이 필요하신 분들은 참고하시면 됩니다

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 기본 캡슐화 기능 테스트

관련 기사