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向右移动而没有动画和显示块。

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

之后，我会在第1页上为翻译设置动画。

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)

它完全是一个黑客但它有效...

在显示块之后立即转换动画

1 个答案: