html - CSS |动画 div 高度从显示 :none to block 开始的内容变化

Question

我有一个弹出式 div。它有一个表单，底部是一条错误消息。错误消息将显示为:未激活时无。显示时，它会更改弹出窗口的大小(使其更高)。我希望这种过渡是平稳的，而不是即时的。这是我尝试过的:

div {
    -moz-transition: height 1s ease-in-out, left .5s ease-in-out;
    -webkit-transition: height 1s ease-in-out, left .5s ease-in-out;
    -moz-transition: height 1s ease-in-out, left .5s ease-in-out;
    -o-transition: height 1s ease-in-out, left .5s ease-in-out;
    transition: height 1s ease-in-out, left .5s ease-in-out;
}

这在我调整 div 大小时有效，但在将 div 的内容从 block 切换为无时无效。

编辑:似乎对我要完成的事情感到困惑。我不想为显示无/ block 元素设置动画。我不想为其 PARENT 的 SIZE(高度)设置动画。例如，当 child 突然变得可见时，它会使它的 parent 更高。我不希望 parent 的高度变化是即时的。我希望它是循序渐进的。

Answer 1

这不会改变您的问题。除非你以某种方式使用 javascript，否则你最好使用 jQuery。

如果子级将父级推得更大，就 CSS 而言，父级不会发生任何动画。您仍然希望动画在 child 身上发生，并希望浏览器和互联网连接速度足够快以跟上。

总而言之，我认为您的思考方式是错误的。如果我错了，请纠正我。

如果您只想让错误消息在视觉上看起来像是在放大弹出窗口，为什么不简单地将错误放在弹出窗口之外并避免俄罗斯套娃嵌套困惑呢？

再一次，如果我错了请纠正我:

代替这个:

<div> Your popup ...
     <div> Error message </div>
</div>

这样做:

<div> A container that covers the screen. Also handy for clicking away the       popup, which is behavior many users expect anyway ...
    <div> Your popup </div>
    <div> Your error </div>
</div>

然后将错误定位在弹出窗口的底部，并在视觉上匹配两者。