iPhone с помощью webkit-transform translate 3d - PullRequest
Новая
       15

iPhone с помощью webkit-transform translate 3d

2 голосов
/ 13 декабря 2011

Я использовал: 

Data.$notification
     .delay(1500)
     .animate({
        right: '+=' + (Data.$notification.width() + 45)
      }, 700)
     .delay(2500)
      .animate({
           right: '-=' + (Data.$notification.width() + 45)
      }, 700, function() { 
          $(this).remove(); 
      });

Но это недостаточно гладко, поэтому, следуя советам людей, я хочу использовать перевод 3D CSS.Банкомат Я не могу заставить его работать, я пробовал: 

Data.$notification
.delay(1500)
.addClass('move-into-view')
.delay(2500)
.removeClass('move-into-view').addClass('move-outof-view')
.delay(1500)
.remove();

Где 

.rotate-notification.move-into-view {
    -webkit-transform: translate3d(-175px, 0, 0);
}
.rotate-notification.move-outof-view {
    -webkit-transform: translate3d(175px, 0, 0);
}

Возможно ли это на самом деле?или я поступаю неправильно?

1 Ответ

3 голосов
/ 13 декабря 2011

.delay() работает только с очередью:

Метод .delay () лучше всего подходит для задержки между поставленными в очередь jQuery последствия. Потому что он ограничен - он, например, не предлагает отменить задержку - .delay () не является заменой нативному JavaScript функция setTimeout, которая может быть более подходящей для определенного использования случаи.

Источник: http://api.jquery.com/delay/

Таким образом, предлагаемый маршрут будет: 

setTimeout(function () {
    Data.$notification.addClass('move-into-view');
    setTimeout(function () {
        Data.$notification.removeClass('move-into-view').addClass('move-outof-view');
        setTimeout(function () {
            Data.$notification.remove();
        }, 1500);
    }, 2500);
}, 1500);

Также вам нужно установить правило transition в вашем CSS для анимации: 

.rotate-notification {
-webkit-transition : -webkit-transform 1.5s ease-in-out;
   -moz-transition : -moz-transform 1.5s ease-in-out;
    -ms-transition : -ms-transform 1.5s ease-in-out;
     -o-transition : -o-transform 1.5s ease-in-out;
        transition : transform 1.5s ease-in-out;
}
.rotate-notification.move-into-view {
-webkit-transform : translate3d(175px, 0, 0);
   -moz-transform : translate(175px, 0);
    -ms-transform : translate(175px, 0);
     -o-transform : translate(175px, 0);
        transform : translate(175px, 0);
}
.rotate-notification.move-outof-view {
-webkit-transform : translate3d(0, 0, 0);
   -moz-transform : translate(0, 0);
    -ms-transform : translate(0, 0);
     -o-transform : translate(0, 0);
        transform : translate(0, 0);
}

Вот демоверсия: http://jsfiddle.net/vJHvA/4/

Обратите внимание, что если вы не используете что-то вроде Modernizr для проверки совместимости браузера и соответствующей адаптации, то вы можете нарушить функциональность в браузерах, отличных от Mobile Safari (например, в браузере Android, который также является браузером WebKit). ).

...