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

我在课程top上调用了这个：

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

但这不符合预期。有没有人知道我做错了什么，为什么顶级的div不是隐藏的动画？

Answer 1

You need to apply styles to #header .top and its children. Something like this:

#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;
}

Parsing the CSS in your fiddle was difficult, as it appears there is a lot more than is needed for an example of the problem. Nevertheless, I created the following fiddle with my code changes: http://jsfiddle.net/pbukcne4/

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

1 个答案: