Question

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

考虑以下脚本：

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”和“ 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

当“ fill”为“ forwards”时，如何在动画后执行程序化的“ transform”

1 个答案: