How to transition padding smoothly?-CodePudding

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"  src="https://www.w3schools.com/html/pic_trulli.jpg" />
    
  </div>

CodePudding user response：

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;
}

CodePudding user response：

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;
}