如何將顯示表動畫為無高度或零高度？

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的div上稱其為：

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

但這不能按預期工作。 有誰知道我在做什么錯，為什么class top的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/