Композитное накопление API веб-анимации

Я думаю, что для этого вам нужно будет удалить преобразование и установить функцию анимации со свойствами left и top.

Как я ясно понимаю из вашего поста и немного его протестировал, вы хотели, чтобы ваш текущий блок оставался в последней позиции, где заканчивается вторая анимация. Функция преобразования, я думаю, немного сложна, поскольку она каким-то образом сбрасывает положение оси Y и по какой-то причине подталкивает ваш блок к верху контейнера.

Я считаю, что лучше работать с обеими анимациями с вышеупомянутыми свойствами.

Я прилагаю вам воспроизводимый пример, в котором, по моему мнению, анимация работает так, как и ожидалось, исходя из того, что вы описали.

Я надеюсь, что это поможет вам в том, что вы ищете.

const el = document.querySelector('.box');
el.animate([{left: '100px', top:'0'}], {duration: 0, fill: 'both'});

el.animate([{left: '200px', top: '100px'}], {duration: 2000, fill: 'both', composite: 'accumulate'});

.container{
  display: block;
  height: 100vh;
  overflow: hidden;
}
.box{
  position: absolute;
  width: 300px;
  height: 100px;
  background-color: brown;
 }

<div class = "container">
  <div class = "box">  
  </div>
</div>

Насколько я помню, опция composite не такая уж и умная, она компилирует разные типы преобразований в одно, а больше похоже на конкатенацию строк. Это поведение может измениться в будущем в зависимости от разных поставщиков.

На данный момент вы можете использовать DOMMatrix для выполнения нужных операций перед анимацией элемента. Это дает вам некоторый контроль над тем, как вы хотите, чтобы «композит» вел себя.

В этом примере я использую библиотеку манипуляций с dom, но вы можете легко получить обещание из нативного Element.animate через finished prop. Остальное — получить текущую матрицу преобразования через getComputedStyle и использовать ее для накопления преобразований через DOMMatrix.prototype. В этом примере я использую DOMMAtrix.prototype.translateSelf.

Следует отметить, что при умеренном использовании getComputedStyle в своих сценариях вы обычно делают это посредством опроса/регулирования функции, которая делает позвоните туда. Другой вариант — установить свойство или символ для элемента, который отслеживает текущую DOMMatrix, чтобы вам не приходилось вызывать getComputedStyle.

(async () => {
 const el = document.querySelector('.box');
 await ch(el).animate([{transform: 'translate(100px, 100px)'}], {duration: 2000, fill: 'forwards'}).promiseAnimate();
 const currMatrix = new DOMMatrix(getComputedStyle(el).transform);
 ch.animate([{transform: currMatrix.translateSelf(200)}], {duration: 2000, fill: 'forwards'})
})()

.container{
  display: block;
  height: 100vh;
  overflow: hidden;
}
.box{
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: brown;
 }

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/cahir.0.0.6.evergreen.umd.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/collections/DOM/ch.js"></script>
<div class = "container">
  <div class = "box">  
  </div>
</div>