Promise

myAnimation.finishedはアニメーションが終了すると解決される promiseオブジェクトを返します。

finished

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var finishedLogEl = document.querySelector('#finishedPromise .finished-log');

var finishedPromise = anime({
  targets: '#finishedPromise .el',
  translateX: 250,
  delay: 1000
});

var promise = finishedPromise.finished.then(logFinished);

function logFinished() {
  finishedLogEl.value = 'Promise resolved';

  // Rebind the promise, since this demo can be looped.
  setTimeout(function() {
    promise = finishedPromise.finished.then(logFinished);
  });
}

finishedPromise.update = function(anim) {
  if (!anim.completed) {
    finishedLogEl.value = '';
  }
}

HTML

<div id="finishedPromise">
  <div class="logs">
    <input class="log finished-log">
  </div>
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.logs {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.log {
  width: 100%;
  height: 22px;
  background: transparent;
  color: currentColor;
  border: none;
  font-size: 16px;
  text-align: center;
}