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

由于你的元素是内联块，我会设置最大宽度的动画。以下js只是为了添加你的消失课程（你还没有显示它是如何被添加的）

＆＃13;

.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 */
}

＆＃13;

<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">
  <img src="http://via.placeholder.com/100x100">
</div>

＆＃13;

Css转换忽略动画

1 个答案: