Jquery iPhone使用webkit transform translate 3d

我使用的是：

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

但它不够平滑，所以根据人们的建议，我想使用Translate3D css。 自动取款机我无法使用，我尝试过：

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

在哪里

这真的可能吗？还是我的做法不对？

.delay（）

仅适用于队列：

.delay（）方法最适合在排队的jQuery之间进行延迟 影响。因为它是有限的，例如，它不能提供一种 取消延迟-.delay（）不是JavaScript的本机 setTimeout函数，可能更适合某些用途 案例

资料来源：

因此，建议的路线是：

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

此外，您还需要在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);
}

下面是一个演示：

请注意，如果您不使用类似于检查浏览器兼容性并进行相应调整的工具，则可以在除Mobile Safari之外的浏览器中中断功能（例如，Android浏览器，它也是一种WebKit浏览器）.
我看不到你的CSS中有任何地方真正定义了
-webkit转换
s。再次感谢你的回答，Japser，真的很好：）多痛苦啊，哈哈，我不得不这么做，iPad应用模式下的动画太糟糕了！
.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);
}