如何正确地链接调用$.show()和$.thoggClass()来触发CSS3动画

Question

我有两个div。一个填充页面，另一个隐藏并显示CSS3动画：

div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.div2{
    top:100%;
    display:none;
    transition: top  0.3s ease-in-out;
}
.div2.shown{
    top:0;
}

现在，我知道我不能把display:block直接放在.showed类中，因为CSS 3动画不支持它。

所以我要做的是：

$(".div2").show().toggleClass("shown");

但是动画不起作用，它只是立即出现。我以为是因为当我触发toggleClass时，.show（）还没有完成。因此，作为一种"持续时间"方法，它必须支持.延迟.

现在，如果我延迟toggleClass:

$(".div2").show().delay(100).toggleClass("shown");

仍然不起作用。让我们试试setTimeout:

$(".div2").show(); 
setTimeout(function(){$(".div2").toggleClass("shown")}, 1);

这个有效。因此，show（）似乎确实是一个长操作，但它不支持delay（）方法。所以我想尝试使用它的回调：

$(".div2").show(function(){$(".div2").toggleClass("shown")});

这是有效的，没有setTimeout！但是回调会被调用两次（一次在开始时，一次在400ms后）。我应该用什么来正确地做到这一点？

Answer 1

我花了一秒钟才看到这个。最简单的解决方案就是在$.show()命令上设置一个计时器0，比如：

$('.div2').show(0).toggleClass('shown');

这将立即切换节目并允许动画发生（请参见http://jsfiddle.net/8y4Lq2n9/)。

如果你担心设置一个特定的数字，你可以将一些选项传递到show命令中，具体的选项是：

$('.div2').show({queue:false}).toggleClass('shown');

这将从动画队列中取出元素，并允许执行其他操作，而不是阻止转换。请参阅：http://jsfiddle.net/8y4Lq2n9/1/