为什么我的对象在用css淡出后再次显示

Question

我有一些div正在显示，我想用css将它们淡出。

我的逻辑是在我希望发生这种情况时，将指向我的动画声明的css类添加到对象上，例如

Css:

.fadeout { -webkit-animation: fadeout 1s; }
@-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

Jquery：

$('.button').on('click', function() {
    $('#something').addClass('fadeout')
});

渐变效果很好。但当它完成后，它再次显示了我褪色的物体。

我在这里缺少的逻辑是什么？完成动画设置后，它不会将不透明度保持为0，而是恢复到原始状态。

注意：解决方案需要通过css进行动画处理——我知道jquery的淡出功能。

Answer 1

尝试：

.fadeout {-webkit-animation:fadeout 1s;animation:fadeout 1s;opacity:0;}
@-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

在这里打转

Answer 2

尝试删除元素：

$("#something").fadeOut(300, function(){ 
    $(this).remove();
});

所以它不会再出现了。

Answer 3

鉴于这需要使用CSS来完成，请使用以下内容：

.fadeout { 
    -webkit-transition: opacity .5s ease-in-out;
     opacity: 0;
}

工作示例如下：http://jsfiddle.net/remus/X64B3/