Изменить положение / целевые значения перехода webkit css, не останавливая его?

Question

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

Позвольте мне объяснить пример, допустим, моя начальная анимация следующая:

-webkit-transition:-webkit-transform 5s ease-in-out
-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg);

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

Возможно ли это как-нибудь? Или есть другой способ сделать это, я не хочу использовать javascript для анимации путем изменения свойств, таких как top / left, я предпочитаю css анимацию.

Спасибо

Answer 1

Я думаю, что лучший и наиболее удобный способ - это переход с JS. Позвольте JS изменить преобразования. JS знает, как далеко он находится в переходе, и вы можете отрегулировать «путь», чтобы приспособить новую целевую позицию. Вы могли бы даже реализовать кривые Безье для гладких кривых, если направление отличается.

Тем не менее, это чертовски много работы.