vanilla js fade in/out

by andfinally

HTML

<span id="fade_in">Fade In</span> |
<span id="fade_out">Fade Out</span>

<div id="yyy" class="wccom-fader" data-fadeTargetId="wccom-show-me">
  Toggle fade
</div>

<div class="frame">
<div id="wccom-show-me" class="wccom-fadee">Fading Box</div>
</div>


<div id="output"></div>

SCSS

.wccom-fader {
  display: block;
  width: 80px;
  border: 1px solid black;
  padding: 5px;
  margin: 20px 20px 0 20px;
  cursor: pointer;
}

.frame {
  height: 100px;
  width: 250px;
  outline: 1px solid black;
}

.wccom-fadee {
  display: none;
  background: red;
  height: 100px;
  width: 250px;
  opacity: 0;
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-out {
  opacity: 0;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.5s;
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Babel + JSX

class ToggleFade {

  constructor() {
    this.faders = document.querySelectorAll('.wccom-fader');
    this.faders.forEach(el => {
      let targetId = el.getAttribute('data-fadeTargetId');
      let target = document.getElementById(targetId);
      el.addEventListener('mouseover', event => {
      	target.style.display = 'block';
        target.classList.remove('fade-out');
        target.classList.add('fade-in');
      });
      el.addEventListener('mouseout', event => {
        target.classList.remove('fade-in');
        target.classList.add('fade-out');
        window.setTimeout(() => target.style.display = 'none', 600);
      })
    });
  }

  fadeIn(el) {
  	el.style.display = 'block';
    el.classList.add('is-opaque');
	  document.getElementById('output').innerHTML = el.classList;    
  }
}

let fade = new ToggleFade();