2015-07-12 3 views
2

У меня есть анимация ng-enter-stagger, которая работает на chrome и firefox, но не на сафари.анимация ng-enter-stagger не работает на сафари

У меня есть префикс определения перехода с помощью -webkit-, но он не работает на сафари. Смотрите эту codepen для демонстрации выпуска

.animate-repeat.ng-enter-stagger, 
    .animate-repeat.ng-leave-stagger { 
     -webkit-transition-delay: 400ms; 
     -webkit-transition-duration: 0s; 
     transition-delay: 400ms; 
     transition-duration: 0s; 
    } 

ответ

2

Для быстрой проверки в Safari, я включил autoprefixer под настройки CSS ->Vendor Приставка в CodePen. Кажется, это исправить последний Safari, так как эффект мне понравился. Если у вас есть какой-либо шаг сборки, я настоятельно рекомендую добавить в состав Autoprefixer. Если вы это сделаете, проблема решена!

Если вы DIYer, когда вы поставщика префиксов свойства и использование переходов/преобразования, вы должны вендора префикс значения свойств, а также:

.animate-repeat.ng-enter, 
    .animate-repeat.ng-leave { 
     -webkit-transition: -webkit-transform 1750ms; 
     transition: transform 1750ms; 
    } 

В ряде случаев в CodePen вы связаны выше, вы этого не делаете. Это должно решить проблему! Причина, по которой у вас были некоторые эффекты, работающие в некоторых браузерах, заключалась в том, что они поддерживали неверные префиксные версии, которые вы написали правильно.

Другого Hacky способа обойти проблемы, как это использовать -webkit-transition: all вместо указания всех различных свойств, хотя это будет влиять на любые и все свойства, которые изменяются.

+0

совершенный только полный ответ, который я искал. –

Смежные вопросы