Can I have multiple transitions on the same property? - html

Question

I need to change width of the element on two different events and with different speeds. Can I somehow specify two transitions of the same property or do I have to change approach?
Let's say I want to quickly increase width of a box with hover. And be able to do the same thing with a button but slower. The problem here is when the class is removed from the box so is the 3s transition. I want a 3s transition to last for the shrinking of the box after the button is pushed again.
const box = document.getElementById("box");
function growQuickly(){
box.classList.toggle("grow");
}
.box{
height:100px;
width:100px;
background: red;
transition: .5s;
}
.box.grow{
width: 200px;
transition: 3s;
}
.box:hover{
width:200px;
}
<div class="box" id="box" ></div>
<button onclick="growQuickly()">GROW SLOWLY</button>

Answer 1

You can separate your logic into more classes and check if something is already included using js.
CSS
.box {
height: 100px;
width: 100px;
background: red;
transition-duration: 0.5s;
}
.box:hover {
width: 200px;
}
.wide {
width: 200px;
}
.slow {
transition-duration: 3s;
}
JS
const box = document.getElementById('box');
function growQuickly() {
const boxWidth = box.offsetWidth;
if (boxWidth === 200 && box.classList.contains('slow')) {
box.classList.toggle('wide');
setTimeout(() => box.classList.toggle('slow'), box.style.transitionDuration);
} else {
box.classList.toggle('wide');
box.classList.toggle('slow');
}
}