I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly.
However, when I attempted to add a minimization feature by adding a transition to height=0;width=0; and including
transition: width, height 1s linear;You can see an example here: https://jsfiddle.net/wsghc65c/7/
Here is my 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;
}