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

Question

我有一个表格在点击时会改变它的高度，但我希望它在点击时改变它的高度超过 500 毫秒。问题是，除非我在元素选项卡中突出显示 Chrome 开发人员工具中的“嵌套表”元素，否则我的动画不会动画。除非突出显示该元素，否则开发工具甚至不会看到动画发生。

这是我的表格基础 CSS：

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

这样可以确保在页面加载时表格是隐藏的。单击它后，我将“扩展”类添加到表的类列表中。 “展开” 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;
}

这确实会导致嵌套表元素在隐藏和弹出其父元素下方之间转换，但前提是我在元素选项卡中突出显示嵌套表。有什么原因吗？

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