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

Fiddle here.

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/

为什么我的对象在用css消失后再次显示？

3 个答案: