CODEWITHSUNDEEP
jqueryiphonecssjquery-mobile
williamsandonz
williamsandonz

Reputation: 16420

iPhone using webkit-transform translate 3d

I was using:

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

But it's not smooth enough, so taking peoples advice I want to use translate 3D css. ATM I can't get it working, I've tried:

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

Where

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

Is this actually possible? or am I going about this the wrong way?

Upvotes: 2

Views: 5166

Answers (1)

Jasper
Jasper

Reputation: 76003

.delay() only works with a queue:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Source: http://api.jquery.com/delay/

So a suggested route would be:

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);

Also you need to set a transition rule in your CSS for an animation:

.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);
}

Here is a demo: http://jsfiddle.net/vJHvA/4/

Note that if you don't use something like Modernizr to check browser compatibility and adapt accordingly then you can break functionality in browsers other than Mobile Safari (for example the Android Browser which is also a WebKit browser).

Upvotes: 3

Related Questions