为什么我的 CSS 动画只有在开发工具中选择元素时才有效？

Question

我有一个 table 在单击时会改变其高度，但我希望它在单击时将其高度转换超过 500 毫秒。问题是，除非我在元素选项卡的 Chrome 开发人员工具中突出显示 'nested-table' 元素，否则我的动画不会动画。除非突出显示该元素，否则开发工具甚至看不到动画的发生。

这是我的基础 CSS table:

.nested-table {
    display: none;
    min-width: 860px;
    max-height: 0;
    height: 100%;
    opacity: 0;
}

这确保 table 在页面加载时隐藏。单击后，我将 "expand" class 添加到 table 的 class 列表中。 "expand"CSS包含所有动画CSS.

这是我的动画CSS:

.expand { 
display: flex;
max-height: 2500px;
opacity: 1;

-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

这确实会导致 nested-table 元素在隐藏和弹出到其父元素下方之间转换，但前提是我在元素选项卡中突出显示 nested-table。这是为什么？

Answer 1

发现我需要使用动画和关键帧而不是过渡。

.nested-table {
    animation: change-height 500ms ease 1 forwards;
}
@keyframes change-height {
    0%{
        max-height: 0px;
        opacity: 0;
    }
    100%{
        max-height: 2500px;
        opacity: 1;
    }
}

为什么我的 CSS 动画只有在开发工具中选择元素时才有效？

Why are my CSS animations only working when selecting the element in dev-tools?

html

css

google-chrome

google-chrome-devtools

css-animations