I want to transition the padding of the image when clicking on the parent div. How can I do it effectively and what is a good way of doing it?
const container = document.getElementById('modal-product-thumb-item');
const myimg = document.getElementById('myimg');
container.addEventListener('click', () => {
myimg.classList.toggle('active-image-wrap');
container.classList.toggle('makeg');
});#modal-product-thumb-item {
border: 3px solid transparent;
}
.active-image-wrap {
padding-left: 20px;
}
.makeg {
border: 3px solid #ffaaff !important;
}<div id="modal-product-thumb-item" style="border-radius: 10px; height: 100%; overflow: hidden; background: tomato">
<img id="myimg" class="thumb-image-wrap" src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>you can add transition to both of your changed classes
.active-image-wrap {
padding-left: 20px;
transition: 1s linear;
}
.makeg {
border: 3px solid #ffaaff !important;
transition: 1s linear;
}
This should work:
JavaScript:
const image = document.querySelector('.image')
const container = document.querySelector('.container')
container.addEventListener('click', () => {
image.classList.toggle('active')
})
CSS:
.image {
transition: padding 200ms;
}
.image.active {
padding: 20px;
}