anime.js - にほんご。

Promise

更新日: 2018-02-09

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;
}

MIT license. © 2017 Julian Garnier.

このコンテンツはJulian Garnier(juliangarnier)によるanime.jsドキュメントを翻訳/改変したものです。