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>Double click to remove item from list</h2>
  <hr>
  <button class="btn btn-success add-item">Append</button>
  <hr>
  <ul class="list-group some-list">

  </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 {}

.fade-leave {}

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

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

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.addEventListener('dblclick', function(e) {
  if (e.target.parentNode === ul) {
    DLAnimate.remove(e.target, {
      name: 'fade'
    });
  }
});