Animation js

По клику появляется новая строка. Качественно работает.

by akogch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <h2>Insert element before other</h2>
  <hr>
  <button class="btn btn-success add-item">Append</button>
  <hr>
  <ul class="list-group some-list">
    <li class="list-group-item">Some item</li>
  </ul>
</div>
<script src="https://unpkg.com/dl-animate"></script>

CSS

.fade-enter {
  opacity: 0;
  transform: translateX(-100px);
}

.fade-enter-active {
  transition: opacity 1s, transform 1s;
}

.fade-enter-to {}

JavaScript

var ul = document.querySelector('.some-list');

document.querySelector('.add-item').addEventListener('click', function() {
  var li = document.createElement('li');
  li.innerHTML = Math.random();
  li.className = 'list-group-item';

  DLAnimate.insert(ul, li, {
    name: 'fade'
  }, ul.children[0]);
});