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）中打破功能。