Css transition ignore the animation - css

Question

I have this css transition, I want to make disappear a div right to left and that the width is reduced little by little:
.disapear {
transition: width 1s ease-in;
width: 0px;
}
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
}
the effect is not animated, and the element disappears abruptly
this is my html:
<div class="img-thumb">
<img src="myimage.jpg">
</div>
the class .disapear is added after clicking on the element
what would be the right way to do it?

Answer 1

As your element is inline-block, I would animate the max width. js below is just to add your disapear class (you haven't shown how it gets added)
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
transition: max-width 1s ease-in;
overflow:hidden; /* add these 2 */
max-width:100%; /* may want to change this to be width of your image to remove the delay from the beggining of the animation */
}
.disapear { /* this needs to appear after the above style */
max-width: 0px;
border: 0; /* hide border */
}
<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">
<img src="http://via.placeholder.com/100x100">
</div>