javascript - 显示 block 后立即转换翻译动画

Question

我正在尝试通过使用 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 向右移动，没有动画和显示 block 。

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

Answer 1

我通过立即使用 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)

这完全是一个 hack，但它有效......