Question

我有一个弹出式div。它有一个表单，底部是一个错误消息。错误消息在未激活时显示：none。显示时，它会更改弹出窗口的大小（使其更高）。我希望这种转变是顺利的，而不是即时的。这是我试过的：

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的内容从块切换为无时不起作用。

编辑：似乎与我正在努力完成的事情混淆。我不想为display none / block元素设置动画。我不想为它的父母的SIZE（高度）制作动画。例如，当孩子突然变得可见时，它会让孩子的父母更高。我不希望父母的高度变化是即时的。我希望它是渐进的。

Answer 1

这不会改变你的问题。除非你以某种方式使用javascript，在这种情况下你最好使用jQuery。

如果一个孩子将父母推得更大，那么就CSS而言，父母没有任何事情发生动画。你仍然希望动画发生在孩子身上，希望浏览器和互联网连接足够快，以便跟上。

总而言之，我认为你正在以错误的方式思考这个问题。如果我错了，请纠正我。

如果你想要的只是因为错误信息在视觉上看起来正在放大弹出窗口，为什么不简单地把错误放在弹出窗口之外并避免俄罗斯玩偶嵌套乱七八糟？

如果我错了，请再次纠正我：

而不是：

<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>

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

Answer 2

以上回复是正确的，但是你别无选择。尝试：

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
 }

请注意隐藏内容的原因，以及如何为无视用户处理内容，这是一个很好的起点：

http://webaim.org/techniques/css/invisiblecontent/

CSS |动画div高度从它的内容变化，从display：none到block

2 个答案: