Html 为什么我的CSS动画只在选择开发工具中的元素时才起作用？

我有一个表，它在单击时正在更改其高度，但我希望它在单击时将其高度转换为500ms以上。问题是，除非我在“元素”选项卡的Chrome developer工具中突出显示“嵌套表”元素，否则我的动画不会动画。除非高亮显示该元素，否则开发工具甚至不会看到动画发生

以下是我的表格基本CSS：

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

这样可以确保在加载页面时隐藏表。单击后，我向表的类列表中添加一个“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 {
    animation: change-height 500ms ease 1 forwards;
}
@keyframes change-height {
    0%{
        max-height: 0px;
        opacity: 0;
    }
    100%{
        max-height: 2500px;
        opacity: 1;
    }
}

---

请提供相关的HTML代码也。