iPhone使用WebKit的转换翻译3D

Question

我所用：

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。 ATM我无法得到它的工作，我已经试过：

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

这实际上是可能的？还是我以这种错误的方式去做？

Answer 1

.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之外的浏览器（例如也是WebKit浏览器的Android Browser）中打破功能。