Блог

API веб-анимации поддерживает анимацию ключевых кадров, поэтому вы можете перейти «от» и «к»:

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

Или я должен сохранить текущую позицию где-то еще?

Вы можете установить свойство transform перед запуском анимации. Кроме того, вы можете использовать <animatable/> WebComponent для изменения и сброса значения start finish событий from и:

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

Подробнее здесь