如何将显示表设置为无高度或零高度？

Question

当collapseTest 类添加到标题时，我正在尝试为标题设置动画。我想出了以下内容：http://jsfiddle.net/robertrozas/atuyLtL0/1/ 感谢@Hackerman 帮助我完成工作。

我想要的是当 collapseTest 类添加到标题时，带有 .top 类的白色 div 应该消失。由于我使用display: table 而不是display: block，因此我无法使用CSS 规则display: none 隐藏包含内容的div。内容不会消失。

我使用以下动画，它适用于display: block，但不适用于table。

@-webkit-keyframes pushDown {
    0% {
        height: 50%;
        display: table;
    }
    100% {
        height: 0;
        display: none;
    }
}

我在 div 上用 top 类调用这个：

#header.collapse .top {
    -webkit-animation: pushDown 2s forwards linear;
}

但这并没有按预期工作。有谁知道我做错了什么，为什么类顶部的 div 没有动画隐藏？

Answer 1

您需要将样式应用于#header .top 及其子项。像这样的：

#header.collapseTest .top {
    height: 0;
    opacity: 0;
    margin-top: -20px;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

#header.collapseTest .top * {
    opacity: 0;
    height: 0;    
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

在你的小提琴中解析 CSS 是很困难的，因为它似乎比问题示例所需的要多得多。尽管如此，我还是用我的代码更改创建了以下小提琴：http://jsfiddle.net/pbukcne4/