순수 Javascript로 fade in 구현하기

순수 Javascript로 fade in 구현하기!

HTMLElement.prototype.fadeIn = function(interval){
      if(!this.classList.contains('fadeChanging')){ //1000
        this.classList.add('fadeChanging')
        const originOpacity = parseInt(window.getComputedStyle(this).opacity)
        this.style.opacity = originOpacity;
        let opacity = parseInt(originOpacity);
        const fadeInterval = (1 - originOpacity)/(interval ? interval/20 : 1000/20)
        const SetInterval = setInterval(()=>{
          if(this.style.opacity < 1){
            this.style.opacity = opacity;
            opacity += fadeInterval
          } else {
            this.style.opacity = 1
            this.classList.remove('fadeChanging')
            clearInterval(SetInterval)
          }
        },20)
      }
    }

DOM을 구성하는 HTML 요소들은 모두 HTMLElement를 상속받기 때문에,

HTMLElement의 prototype에 method를 추가하면

HTML 태그를 구성하는 모든 요소들은 __proto__ 속성을 통해 fadeIn을 상속 받을 수 있게 된다.

또 fadeIn이 실행되는동안, 함수의 중복실행을 막기 위해 

fadeChanging이라는 클래스를 붙여서 

실행되는 동안에는 추가 실행을 막아버린다.

이 함수의 핵심은 interval 인자인데,

interval에 1000이라는 숫자가 들어오면 정확하게 1초동안 fadein이 실행되어야 하기 때문에

(1 - originOpacity)/(interval ? interval/20 : 1000/20) 

(1초동안 변화해야할 총 opacity)/(애니메이션은 20ms마다 일어나므로, 1초를 20으로 나눈값)

이런 계산식으로 구현했다.

아무래도 this의 바인딩 때문에 화살표함수보다는 일반 function을 사용했는데,

아무리 고민해봐도 화살표함수는 여기서 사용이 불가능하다.

this를 가져올 방법이 없기 때문이다.

fadeOut은 fadeIn의 역순으로 구현하면

역시 간단하게 코드르 만들 수 있다.

.