CSS3 Webkit-过渡淡入/淡出

Question

我在使用 CSS3 实现非常简单的淡入淡出效果时遇到了一些麻烦。这是我的场景：

我有一个列表 a，其中包含一些内容。我还有一些链接，单击这些链接会过滤列表中的内容。我想要的是，当页面加载时，列表会淡入，并且每次过滤列表时，列表都应该消失，而不是随着新内容淡入。

我在页面加载时实现了淡入淡出功能。然而，当我尝试让列表消失并再次淡入时，我无法让它工作。

这是我创建的一个 jsfiddle 来演示我正在尝试做的事情。 - http://jsfiddle.net/YeKX2/28/

对此的任何帮助表示赞赏。

Answer 1

保持它主要基于 webkit，而不是像您看起来那样使用 jQuery，您可以执行以下操作来实现您的目标：

function test(){
    document.getElementById('list').style.opacity = "0";
    setTimeout("document.getElementById('list').style.opacity = '1';",2000);
}

您必须考虑时机。

另外，需要注意的是，如果您想影响 -webkit-transition 的时间，可以使用以下语法。

document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";

Answer 2

如果可能的话，我强烈建议包含 jQuery 库。然后淡入淡出就像：

jQuery("#elementId").animate({opacity:0});
jQuery("#elementId").animate({opacity:1});

否则，您最终会遇到浏览器问题，因为某些浏览器（IE）对不透明度的处理方式不同，并且 webkit-transition 是一个实验性的 mozilla 属性。