Animation js

Являем/скрываем блок со строками.

by akogch

HTML

<div class="container">
  <h2>Some sample</h2>
  <hr>
  <button class="btn btn-primary show-alert">Show</button>
  <button class="btn btn-warning hide-alert">Hide</button>
  <hr>
  <div class="alert alert-success animTarget">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>
  <hr>
  <p>Other content</p>
</div>

CSS

.animTarget {
  display: none;
}

.fa-enter {
  visibility: hidden;
}

.fa-enter-active {
  animation: niceIn 0.5s linear;
}

.fa-enter-to {}

.fa-leave {}

.fa-leave-active {
  animation: niceOut 0.5s linear;
}

.fa-leave-to {}

@keyframes niceIn {
  from {
    transform: translateX(-100px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@keyframes niceOut {
  from {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(100px) scale(0.9);
    opacity: 0;
  }
}

JavaScript

var btnShow = document.querySelector('.show-alert');
var btnHide = document.querySelector('.hide-alert');
var divAlert = document.querySelector('.animTarget');

btnHide.addEventListener('click', function() {
  var handler = function() {
    divAlert.style.display = 'none';
    divAlert.classList.remove('fa-leave-active');
    divAlert.classList.remove('fa-leave-to');
    divAlert.removeEventListener('animationend', handler);
  };

  divAlert.classList.add('fa-leave');

  raf(function() {
    divAlert.classList.add('fa-leave-active');
    divAlert.classList.add('fa-leave-to');
    divAlert.classList.remove('fa-leave');
  });

  divAlert.addEventListener('animationend', handler);
});

btnShow.addEventListener('click', function() {
  var handler = function() {
    divAlert.classList.remove('fa-enter-active');
    divAlert.classList.remove('fa-enter-to');
    divAlert.removeEventListener('animationend', handler);
  };

  divAlert.style.display = 'block';
  divAlert.classList.add('fa-enter');

  raf(function() {
    divAlert.classList.add('fa-enter-active');
    divAlert.classList.add('fa-enter-to');
    divAlert.classList.remove('fa-enter');
  });

  divAlert.addEventListener('animationend', handler);
});

function raf(fn) {
  window.requestAnimationFrame(function() {
    window.requestAnimationFrame(function() {
      fn();
    });
  });
}