html - Css 左过渡不适用于高度和左

Question

我正在尝试制作某种工具箱，我需要让工具箱在打开时从左侧出现，所以我从left=-1500px 过渡到left=0; 效果很好。

当我尝试对 height=0;width=0; 添加过渡进行某种最小化时，我添加了:transition: width, height 1s linear; transition left停止工作。

这里是例子:https://jsfiddle.net/wsghc65c/7/

我的CSS:

.modal {
    visibility: visible;
    position: fixed;
    z-index: 1;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    margin: auto;
    opacity: 1;
    padding: 10px;
    padding-top: 25px;
    border-radius: 15px;
    background-color: #aaa;
    border-width: thin;
    border-style: solid;
    transition: visibility 0.1s linear;
    transition: left 1s linear;
    transition: width, height 1s linear;
}

.modal-content {
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 80vh;
    mac-width: 86vh;
}

.modal-left-hide {
    visibility: hidden;
    left: -1500px;
}

.modal.minimized {
    width: 0%;
    height: 0%;
    left: 10vh;
    padding: 0;
    margin: 0;
}

Answer 1

https://jsfiddle.net/wsghc65c/16/

将高度宽度过渡添加到最小化类。您可能还想将溢出设置为隐藏。

.modal.minimized {
    width: 0%;
    height: 0%;
    left: 10vh;
    padding: 0;
    margin: 0;
    transition: width 1s linear, height 1s linear;
}