jQuery Mobile переход на iPad - PullRequest
Новая
       24

jQuery Mobile переход на iPad

0 голосов
/ 20 марта 2012

У меня есть действительно простой набор переходов CSS, который я назвал «реальным слайдом».Все, что он делает, это скользит (тогда как jQuery Mobile 'скользит', скользит и исчезает).Я пытаюсь получить некоторое облегчение, похожее на easeOutCubic, где анимация ускоряется в начале и медленно разворачивается, когда завершает свои транзитные переходы.

Мэтью Лейн создал отличный сайт для нестандартного CSS-смягчения: http://matthewlein.com/ceaser/

Однако, когда я добавляю это в jQuery Mobile, переходы практически не существуют и крайне запаздывают.Это сбивает с толку, потому что кажется, что 3D-переходы просто отлично.

Кто-нибудь знает, что происходит?Я использую iPad 2 / iOS 5.1, jQuery Mobile 1.1.0-RC1, PhoneGap 1.4.

Мой JSFiddle: http://jsfiddle.net/4TLLc/

Мой переход: 

.realslide.in
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

.realslide.out
{
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

.realslide.in.reverse
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromleft;
}

.realslide.out.reverse
{
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromright
{
    from { -webkit-transform: translateX(100%);}
    to { -webkit-transform: translateX(0);}
}

@-webkit-keyframes slideouttoleft
{
    from { -webkit-transform: translateX(0);}
    to { -webkit-transform: translateX(-100%);}
}

@-webkit-keyframes slideinfromleft
{
    from { -webkit-transform: translateX(-100%);}
    to { -webkit-transform: translateX(0);}
}

@-webkit-keyframes slideouttoright
{
    from { -webkit-transform: translateX(0);}
    to { -webkit-transform: translateX(100%);}
}

Анимация, которая убивает окно WebGit PhoneGap: 

.ui-page
{
    -webkit-transition: all 750ms cubic-bezier(1.000, 1, 0.265, 1); /* older webkit */
    -webkit-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
       -moz-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
        -ms-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
         -o-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
            transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); /* custom */
}

1 Ответ

2 голосов
/ 29 марта 2012

Попробуйте заменить translateX(x) на translate3d(x, y, z).

translate3d запускает ускорение GPU, где translateX нет.

...