javascript - 删除 CSS3 动画

Question

当 li 从 ul 中移除时，我想添加一个微妙的淡入淡出效果。我添加了这段 CSS:

-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

在我的 li 上

但是，当我使用 $(this).remove(); 删除 li 时，li 被删除但没有看到动画。

我错过了什么？

编辑 我不想使用 Jquery fadeOut。我希望能够使用 CSS3 动画。

Answer 1

这是一种 CSS 方法。

fiddle :http://jsfiddle.net/moc1jt05/

HTML:

<ul>
    <li>hellow world 1!!</li>
    <li>hellow world 2!!</li>
</ul>

CSS:

li {
    transition: all 0.2s ease;
    opacity: 1;
}
li.hide {
    opacity: 0;
}

JQUERY:

$("li").on("click", function() {
    $(this).addClass("hide");
});