Question

我试图仅使用CSS进行崩溃。我做了类似的事，但它没有用。我认为是动态高度的问题，因为当我在px中添加高度时，一切都有效。我该怎么办？

@-moz-keyframes collapseIn {
    from {height: 0%;}
    to {height: 100%;}
}

@-webkit-keyframes collapseIn {
    from {height: 0%;}
    to {height: 100%;}
}

@keyframes collapseIn {
    from {height: 0%;}
    to {height: 100%;}
}
@-moz-keyframes collapseOut {
    from {height: 100%;}
    to {height: 0%;}
}

@-webkit-keyframes collapseOut {
    from {height: 100%;}
    to {height: 0%;}
}

@keyframes collapseOut {
    from {height: 100%;}
    to {height: 0%;}
}

.collapseCSS.ng-enter {
    -webkit-animation: collapseIn 1s;
    -moz-animation: collapseIn 1s;
    animation: collapseIn 1s;
}
.collapseCSS.ng-leave {
    -webkit-animation: collapseOut 1s;
    -moz-animation: collapseOut 1s;
    animation: collapseOut 1s;
}

Answer 1

我通过添加max-height：100vh解决了这个问题;而不是100％。如果在崩溃开始时没有人滚动页面 - 它运作良好。 ;）

.collapseCSS {
    overflow:hidden;
}    
.collapseCSS.ng-enter-prepare{
    max-height: 0px;
}
.collapseCSS.ng-enter {
    animation: ng-enter 1s;
}
.collapseCSS.ng-leave {
    animation: ng-leave 1s;
}
@keyframes ng-leave {
    from {max-height: 100vh;}
    to {max-height: 0vh;}
}
@keyframes ng-enter {
    from {max-height: 0vh;}
    to {max-height: 100vh;}
}

CSS：来自 - ＆gt;的关键帧以百分比高度

1 个答案: