javascript - 在 IE10 中改变高度后消失的 div

Question

我有两个简单的顶部和底部行，一个在另一个之上。单击时我有一个按钮，它将底行延伸到顶行，使底行成为唯一的行。

.container-fluid {
    .row.main-body {
        height: 100%;
        width: 100%;
        >div:first-child {
            position: absolute;
            left: 0;
            right: 0;
            height: 100%;
            transition: $transition-length;
            .row.bottom {
                max-height: calc(100% - 356px);
                height: 100%;
                transition: max-height 0.5 ease-in;
                &.hidedashboard {
                    max-height: 100%;
                    transition: max-height $transition-length ease-out;
                    height: -webkit-fill-available;
                    padding-bottom: 7em;
                }
             }
            .row.Top {
                height: 260px;
                transition: height 0.5 ease-in-out;
                &.hidedashboard {
                    height: 0;
                    overflow: hidden;
                }
                &:not(.hidedashboard) {
                    height: 260px;
                }
                .card {
                    max-height: 260px !important;
                }
            }
        }
    }
}

从上面的样式来看，.row.bottom 是最下面的行，.row.Top 是行的顶部。

隐藏前

循环按钮切换行。单击 SHowDashboard 时，row.top 高度从 0 变为 260px。如果 HideDashboard 被点击 高度从 260px 变为 0。

隐藏后

我的代码适用于 chrome 和 IE 11。到目前为止，在IE10中，当我们隐藏和显示时。尽管存在 HTML，但顶部呈现空白，只是白色屏幕。隐藏时，由于过渡延迟，我可以看到它显示出来。请问我该如何解决这个问题？这仅在 IE 10 中发生

Answer 1

事实证明 ie10 有不同高度的问题。所以我没有过渡两行，而是根据需要给顶部一个固定高度，然后将底部行平移到顶部行上。这样高度就不需要从 height: 0 更改为 height: 260px。所以基本上

.container-fluid {
    .row.main-body {
        height: 100%;
        width: 100%;
        >div:first-child {
            position: absolute;
            left: 0;
            right: 0;
            height: 100%;
            transition: $transition-length;
            .row.bottom {
                background-color: $gray-100;
                height: calc(100% - 356px);
                transition: all $transition-length ease-in-out;
                &.hidedashboard {
                    transform: translateY(-260px);
                    height: 100%;
                    height: -webkit-fill-available;
                    padding-bottom: 7em;
                }
             }
            .row.Top {
                height: 260px;
                .card {
                    max-height: 260px !important;
                }
            }
        }
    }
}

从上面的样式来看，.row.top既不平移也不改变高度。 row.bottom 改为垂直变换。当我们垂直变换到顶行的顶部时，它工作正常。谢谢