Edit in JSFiddle

on('.m1', 'animationend', function() {
  var classlist = Array.prototype.slice.apply(this.classList);
  if (classlist.indexOf('dnone') == -1) {
    this.classList.add('dnone')
  } else {
    setTimeout(function(){
      this.parentNode.removeChild(this)
    }, 1000)
  }
})

on('button', 'click', function() {
  select('.m1').classList.toggle('leave');
})

function select(selector) {
  return document.querySelector(selector)
}

function on(selector, eventName, cb) {
  select(selector).addEventListener(eventName, cb);
}

<div class="m m1"></div>
<div class="m m2"></div>
<button>Click</button>

.m {
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
    will-change: transform;
}
.m1 {
  background: #f90;
}
.m2 {
  background: #90f;
}
.leave {
  animation: right 1s ease-out forwards;
  will-change: height;
}
.dnone {
  animation: dnone .2s ease-out forwards;
}
@keyframes right {
  0% {
     transform: translate3d(0,0,0);
     opacity: 1;
  }
  100% {
     transform: translate3d(200%,0,0);
     opacity: 0;
  }
}
@keyframes dnone {
  0% {
    transform: translate3d(200%,0,0) scale(1,1);
     opacity: 0;
  }
  100% {
    transform: translate3d(200%,0,0) scale(1,0);
     opacity: 0;
     height: 0px;
     margin: 0;
  }
}