html - 如何添加带有动画的类？

Question

我想通过添加类使图像消失

但如果我这样做，我的元素会在没有动画的情况下消失

我想让它慢慢消失

我知道有一些 css3 属性，但我不知道是哪个

我知道如何使用不透明动画来做到这一点，但我不想

HTML

<img scr="..." class="a">
<button onclick="make_img_dissappear()">Click to dissappear</button>

CSS

.hide{
display: none;
}
.a{
/*these properties must provide adding class with animation*/
}

JavaScript

function make_img_dissappear(){
$("img").addClass("hide");
}

Answer 1

您可以使用 CSS transitions 而不是 javascript 解决方案如果您愿意使用(例如)opacity 而不是 display。

.hide {
  opacity: 0;
}
.a {
  transition: opacity 1s linear; /* vendor prefixes, etc */
}