過渡翻譯顯示塊後立即動畫

我想通過使用Javascript（jQuery）更改CSS動畫頁面過渡。我有兩頁，其中一頁設置爲無顯示。過渡翻譯顯示塊後立即動畫

page1 = $('.page1'); 
page2 = $('.page2'); 

page1.removeClass('animate').css('display', 'block').css('transform','translate3d(0,0,0)'); 
page2.removeClass('animate').css('display', 'none').css('transform','translate3d(0,0,0)');

然後，我將page2移動到右側而沒有動畫和顯示塊。

page2.removeClass('animate') 
    .css('display', 'block') 
    .css('transform','translate3d(100px,0,0)');

緊隨其後，我通過page1生成翻譯動畫。

page2 
    .addClass('animate') 
    .css('transform','translate3d(0px,0,0)');

這裏的問題是，如果我一個接一個地做這兩個動畫，那麼就沒有動畫。但是如果我在兩者之間短暫地等待，它就會很好。

http://codepen.io/anon/pen/myeopr

來源

2014-12-04 Chet

你能解釋一下你要找的行爲實現？ – 2014-12-04 06:02:20

我希望先將page2放在page1的右邊。然後將其滑動滑動。在CodePen中，你會看到如果你點擊移動按鈕，然後是動畫按鈕，那是我希望看到的。然後重置或刷新頁面。如果按下兩個按鈕，則在移動並顯示page2之後立即運行動畫。發生這種情況時，您會看到沒有動畫。 – Chet 2014-12-04 06:13:48

我找到了解決方案，通過使用setTimeout的無延遲

page2.removeClass('animate') 
    .css('display', 'block') 
    .css('transform','translate3d(100px,0,0)'); 

setTimeout(function() { 
    page2 
     .addClass('animate') 
     .css('transform','translate3d(0px,0,0)'); 
}, 0)

它完全是一個黑客，但它的工作原理...

來源

2014-12-04 21:51:27 Chet

過渡翻譯顯示塊後立即動畫

回答

相關問題