переводить анимации, ведущие себя странно на IE11? - PullRequest
Новая
       47

переводить анимации, ведущие себя странно на IE11?

0 голосов
/ 26 июня 2018

Я исследовал и странное поведение при просмотре CSS-анимации в IE11. Я выкопал несколько случаев, когда IE11 пытается переварить CSS-анимацию, похожую на Chrome / Firefox, но я хотел бы раз и навсегда найти решение этой «ошибки».

Демонстрация поведения: http://recordit.co/6urL1s8XgR

Как вы можете видеть, когда пользователь взаимодействует с «кнопкой», анимация должна скользить снизу справа, увеличиваться и устанавливать непрозрачность 1. A универсальное представление Подход ниже: 

.element {
   ...
   opacity: 1;
   animation: animate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes animate {
    from {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 0, 500px);
    }
}

Однако в IE11 анимация в DOM ниже, чем в других браузерах, в результате чего анимированный элемент «подпрыгивает» от того места, где он (неправильно) заканчивался (анимация), до того места, где он требовался до конца.

Подобную демонстрацию можно наблюдать по следующему адресу: https://chemonics.com/region/

1 Ответ

0 голосов
/ 27 июня 2018

Я решил эту проблему, изолировав эту проблему, так как свойство animation-fill-mode для «forwards» отсутствовало. Это приводило к тому, что анимация (которая имела только ключевой кадр 0%, определенный для анимации) заканчивалась (со 100%) наследованием стилей исходного состояния элементов (до анимации). В более современных браузерах они «заполняют пробелы», тогда как в IE11 он прыгает между пробелами.

https://drafts.csswg.org/css-animations-1/#valdef-animation-fill-mode-forwards

...