javascript - 如何在 Web Animation API 中为“from”设置动画

Question

Web Animation API 支持关键帧动画，所以你可以去“from”和“to”：

// Go from 0 to 300px
someElement.animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(300px)' }   
], {
  duration: 1000
});

有没有办法去“到”而不必指定“从”？就像是：

// Go from the current position to 300px
someElement.animate({ transform: 'translateY(300px)' }, {
  duration: 1000
});

或者我必须将当前位置存储在其他地方？

Answer 1

您可以在开始动画之前设置变换属性。此外，您可以使用WebComponent修改和重置来自事件的值：<animatable/> startfinish

• HTML：

<animatable-component delay="1000" duration="800" animation="slideInUp" easing="ease-in-out">
  <h1>Hello World</h1>
</animatable-component>

• JS：

const animatableElement = document.querySelector('animatable-component')
animatableElement.addEventListener("start", function(event) {
  console.log('ANIMATION START', event);
  var startTransform = 'translateY(0px)'
  event.detail.style.transform = startTransform;
  event.detail.style.webkitTransform = startTransform;
});

animatableElement.addEventListener("finish", function(event) {
  console.log('ANIMATION FINISH', event);
  var endTransform = 'translateY(300px)'
  event.detail.style.transform = endTransform;
  event.detail.style.webkitTransform = endTransform;
});

更多细节在这里