Web Animation API：animation.finished 的 Promise 始终处于待处理状态

Question

使用animation.cancel()后，animation.finished的Promise始终处于pending状态，那么我无法使用Promise来等待动画完成。

我尝试了所有可以使用的方法，例如animation.finish()，但它仍然悬而未决。

let btn = document.querySelector("#btn");
let element = null;
let currentId = 1;
let ani = null;
let transformArray = [
  {transform: 'translate(0px, 0px)'},
  {transform: 'translate(100px, 0px)'}
];


btn.onclick = function () {
  element = document.querySelector("#icon" + currentId);
  Promise.all([ani && ani.finished]).then(function() {
    ani = element && element.animate(transformArray, {
      duration: 1000,
      fill: "forwards",
      easing: "ease"
    })

    ani.finished.then(() => {
      ani.cancel()
    });
  });
  currentId++;
  if (currentId == 4) {
    currentId = 1
  }
}

.query-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
}
#icon1 {
    background-color: antiquewhite;
}
#icon2 {
    background-color: aqua;
}
#icon3 {
    background-color: orangered;
}

<div class="query-icon" id="icon1">
</div>
<div class="query-icon" id="icon2">
</div>
<div class="query-icon" id="icon3">
</div>


<button id="btn">animate</button>

我期望的是，每次单击按钮时，该框都会在上一个动画完成后取消其动画，并更改为另一个框进行动画。

Answer 1

let btn = document.querySelector("#btn");
let element = null;
let currentId = 1;
let ani = null;
let transformArray = [
  {transform: 'translate(0px, 0px)'},
  {transform: 'translate(100px, 0px)'}
];


btn.onclick = function () {
  element = document.querySelector("#icon" + currentId);
  Promise.all([ani && ani.finished]).then(function() {
    ani = element && element.animate(transformArray, {
      duration: 1000,
      fill: "forwards",
      easing: "ease"
    })

    ani.finished.then(() => {
      ani.cancel()
    });
  });
  currentId++;
  if (currentId == 4) {
    currentId = 1
  }
}

.query-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
}
#icon1 {
    background-color: antiquewhite;
}
#icon2 {
    background-color: aqua;
}
#icon3 {
    background-color: orangered;
}

<div class="query-icon" id="icon1">
</div>
<div class="query-icon" id="icon2">
</div>
<div class="query-icon" id="icon3">
</div>


<button id="btn">animate</button>

let btn = document.querySelector("#btn");
let element = null;
let currentId = 1;
let ani = null;
let transformArray = [
  {transform: 'translate(0px, 0px)'},
  {transform: 'translate(100px, 0px)'}
];


btn.onclick = function () {
  element = document.querySelector("#icon" + currentId);
  Promise.all([ani && ani.finished]).then(function() {
    ani = element && element.animate(transformArray, {
      duration: 1000,
      fill: "forwards",
      easing: "ease"
    })

    ani.finished.then(() => {
      ani.cancel()
    });
  });
  currentId++;
  if (currentId == 4) {
    currentId = 1
  }
}

.query-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
}
#icon1 {
    background-color: antiquewhite;
}
#icon2 {
    background-color: aqua;
}
#icon3 {
    background-color: orangered;
}

<div class="query-icon" id="icon1">
</div>
<div class="query-icon" id="icon2">
</div>
<div class="query-icon" id="icon3">
</div>


<button id="btn">animate</button>