Animated popup hide

by Max Sinev

HTML

<div class="main">
  <div class="input-wrapper">
    <input type="text" class="input">
  </div>
  <div class="popup"></div>
</div>

SCSS

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.main {
  height: 100%;
  width: 100%;
  background: #ccc;
  position: relative;
}

.input {
  margin: 10px;
}

.popup {
  width: 100px;
  height: 100px;
  background: cyan;
  position: absolute;
  top: 35px;
  left: 10px;
  margin: -99999px 0 -99999px;
  transform: translateY(50px);
  transition: transform .3s ease-out;
  
  &_animated {
    animation: animOut .3s linear;
  }
  
  &_visible {
    margin: 0;
    transform: translateY(0);
    animation: none;
  }
}

@keyframes animOut {
  0% {
    margin: 0;
  }
  
  99% {
    margin: 0;
  }
  
  100% {
    margin: -9999px 0 -9999px
  }
}

JavaScript

const popup = document.querySelector('.popup');
const input = document.querySelector('.input');

input.addEventListener('focus', () => {
		popup.classList.add('popup_visible');
});

input.addEventListener('blur', () => {
		popup.classList.remove('popup_visible');
    
    if (popup.className.indexOf('popup_animated') < 0) {
    	popup.classList.add('popup_animated');
    }
});