CSS3 通过 jQuery 触发时，过渡最初不起作用

Question

我正在使用 jquery 触发 div 的悬停另一个 div 的调整大小：

$("#lggroup").hover(function()
{
    $("#register").css("width", "200px");
}, function()
{
    $("#register").css("width", "0px");
});

第二个 div 具有过渡效果，最初不影响更改，但在第二次悬停后会影响。

transition: width 0.25s;

虽然没有破，但突然的宽度扩展有一个令人不快的效果。

你可以看到最初在运行之后fiddle主要div因为灰色div突然膨胀。之后过渡就开始了。有任何解决方法或原因吗？

Answer 1

您应该给 #register 一个初始 width 值：

#register {
    transition:width 0.25s;
    width: 0px;
}

Answer 2

您的问题出在 CSS，您正在尝试为宽度设置动画，但初始值不存在，因此没有动画。第二次执行此操作时，宽度确实存在并具有动画效果。为此更改您的寄存器 css（我还放置了一个等于其他 div 的高度）：

#register
{
    width:0;
    height:400px;
    transition:width 0.25s;
}

CSS3 transition not working initially when triggering via jQuery