CSS-преобразование, установленное через JS, конфликтует с CSS-анимацией - PullRequest
Новая
       37

CSS-преобразование, установленное через JS, конфликтует с CSS-анимацией

0 голосов
/ 29 мая 2018

Я довольно привык использовать анимацию и т. Д., Но это меня озадачило.У меня есть CSS-анимация, например, для элемента div inline-block. 

0% {
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}

100% {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

, запущенного с 

animation: fade-in-b 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;

Затем я хочу добавить эффект параллакса к элементу при прокрутке, поэтомуJS изменяет свойство transform также с помощью translateY ().Проблема в том, что это не принимается во внимание.

Отладка Chrome, показывающая, что оба преобразования применяются

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

Кажется, что анимация CSS имеет приоритет над CSS, применяемым JS, это предполагаемое поведение?Я думаю, я мог бы удалить CSS-анимацию с помощью javascript перед применением преобразования, но если есть что-то более простое, у меня все на слух.Кажется, я не могу найти что-нибудь в Интернете, чтобы помочь мне, поэтому любые советы в правильном направлении будут оценены.

...