You have a couple options here:
- Dynamically apply a class to the element based on the condition
- Dynamically apply inline styling to the element based on the condition
Personally, I prefer to use classes. Here is an example:
const val = 42;
// Conditional
if (val === 42) {
setTimeout(() => {
document.querySelector('.box').classList.add('box--blue');
}, 1000);
}
if (val === 100) {
setTimeout(() => {
document.querySelector('.box').classList.add('box--green');
}, 1000);
}.box {
width: 100px;
height: 100px;
background-color: deeppink;
transition: all 2s ease;
}
.box--blue {
background-color: dodgerblue;
}
.box--green {
background-color: limegreen;
}<div class="box" />