Проблема анимации CSS3 в Android-webkit -iteration-count и 'forwards' не останавливает анимацию - PullRequest
Новая
       11

Проблема анимации CSS3 в Android-webkit -iteration-count и 'forwards' не останавливает анимацию

0 голосов
/ 26 октября 2011

Я использую некоторые CSS3 2D-преобразования для анимации меню для определенного веб-приложения для Android.

Я вставляю параметры анимации, используя Javascript, так как они применяются только после запуска функции ontouchstart.

Вот пример JavaScript для первой части анимации: 

function d1(){
        var d1=document.getElementById('d1');
        d1.style["-webkit-animation"] = "slide1";
        d1.style["-webkit-animation-duration"] = "3s";
        d1.style["-webkit-animation-iteration-count"] = "1";
        d1.style["-webkit-animation-fill-mode"] = "forwards";
        }

Вот CSS3 для анимации slide1: 

     @-webkit-keyframes slide1 {
       0%{-webkit-transform:translateY(0) scaleY(0);}
       100%{-webkit-transform:translateY(122px) scaleY(1);}
     }

Этот код правильно отображает анимацию, однако после завершения каждого состояния анимации он исчезает. Из того, что я прочитал, это должно быть решено с помощью -webkit-animation-fill-mode:forwards или -webkit-animation-iteration-count:1, но ни один из них не останавливает / приостанавливает анимацию после ее воспроизведения.

Кто-нибудь еще сталкивался с подобной проблемой с Android? Пожалуйста помоги. Спасибо

Ответы [ 3 ]

3 голосов
/ 15 марта 2012

просто добавьте это в свой CSS.Android не любит, чтобы он был вложенным или сокращенным.Я попробовал это, и это работало хорошо для меня, и вот как я делаю всю свою анимацию webKit. 

@-webkit-keyframes slide1 {
    -webkit-transform: translateY(122px);
    -webkit-transform: scaleY(1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
}
1 голос
/ 22 декабря 2011

Печальная реальность такова, что Android не любит animation-fill-mode.

Из того, что я прочитал, вам нужно изменить свою анимацию или окунуться в какой-нибудь JS и использовать событие animationEnd, как здесь: Как повторно вызвать CSS-анимацию WebKit через JavaScript?

0 голосов
/ 26 октября 2011

Вы исследовали, возвращается ли ваша анимация к стадии 0%, например. установить начальную шкалу Y на 0,25 или около того?

Кроме того, вы можете проверить все возможные режимы заполнения (нет / вперед / назад / оба), чтобы увидеть, имеет ли он эффект.

Кроме того, рекомендуется (для лучшей производительности) использовать translate3d() вместо translateX / Y.

...