javascript - 当 `transform` 为 `fill` 时如何在动画后执行编程 "forwards"

Question

如果 animation-fill-mode 属性设置为 true，在使用 Animation API 为元素设置动画后，我无法执行另一个 transform。

考虑以下脚本:

var elem = document.querySelector('#box');

document.querySelector("#translate").addEventListener('click', () => {
  elem.style.transform = "rotate(45deg)"
})

document.querySelector("#animate").addEventListener('click', () => {
  var animation = elem.animate({
    opacity: [0.5, 1],
    transform: ['translateX(0)', 'translateX(25px)'],
  }, {
    duration: 500,
    iterations: 1,
    // Change this value to "auto" or "none" for expected behavior
    fill: "forwards"
  });
})

如果单击 #animate 按钮，我希望看到动画执行。这确实发生了。在动画完成并且元素向右多 25px 后，#translate(最好命名为 #transform)按钮在单击时不再执行旋转。

如果 fill 属性不是“forwards”或“both”，它会正确地旋转元素。

JSBin Example

Answer 1

我有一个破解的解决方案。我会把它贴在这里，但理想情况下，存在一个不是这个的解决方案。

似乎取消动画会“解锁”要再次转换的元素。

const elem = document.querySelector('#box');

document.querySelector('#translate').addEventListener('click', () => {
  elem.style.transform = elem.style.transform + ' rotate(45deg)';
});

document.querySelector('#animate').addEventListener('click', () => {
  const animationDuration = 500;
  const targetTranslation = 'translateX(25px)';

  const animation = elem.animate({
    transform: ['translateX(0)', targetTranslation],
  }, {
    duration: animationDuration,
    iterations: 1,
    // Change this value to "auto" or "none" for expected behavior
    fill: 'forwards'
  });

  setTimeout(() => {
    animation.cancel();
    elem.style.transform = targetTranslation;
  }, animationDuration);
});

JSBin Example