CSS过渡忽略动画

Question

我有这个CSS过渡，我想让消失的div右至左，并且宽度一点一点地缩小了：

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

效果没有动画，元素突然消失

这是我的html：

<div class="img-thumb">
 <img src="myimage.jpg">
</div>

单击元素

之后，添加了类 .disapear

做正确的方法是什么？

Answer 1

由于您的元素是inline-block，我会为最大宽度进行动画。下面的JS只是为了添加您的拆除类(您尚未显示如何添加它(

.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>