動畫翻譯滾動

2014-02-22 132 views 0 likes

我試圖在用戶滾動時動畫翻譯（X，Y）。我已經實現了所有的滾動功能，因爲交換機是即時的，所以它看起來很可怕。動畫翻譯滾動

我似乎無法弄清楚如何爲翻譯生成動畫。

上的負載，我的容器具有價值-webkit-transform: translate(0%, 0%);，要到第二個「滑」它會被改爲-webkit-transform: translate(0%, -100%);

我只是做這個通過jQuery的：

$('.container').css({"transform":"translate(0%,-" + positionY + "%)"});

（注：我用翻譯（X，Y）爲後來移動端的方式）

2014-02-22 speak

回答

使用CSS transition property可以獲得平滑的效果。

.container { 
    transition: transform 1s; 
}

（你還需要供應商前綴爲目標的所有瀏覽器。）

2014-02-22 18:05:39 feeela

嘆息。總是那些容易被你吸引的人。 -webkit-transition：-webkit-transform 2s完美無缺地工作，非常感謝你的時間。 – speak

相關問題