Question

我正试图制作toolbox的某些内容，我需要在开场时从左边开始制作工具箱，所以我从left=-1500px to left=0;进行转换，这样就可以了。

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

我的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/

将高度宽度过渡添加到最小化的类。您可能也想隐藏溢出。

X=0,3,6,9,12 (up to 99)
Y1=1,1,2,5,2 (up to 33 numbers)
Y2=3,3,3,5,3 (up to 33 numbers)

Css左转换不适用于高度和左侧

1 个答案: