Question

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

我有一个列表，其中包含一些内容。我也有一些链接，点击时过滤列表中的内容。我想要的是，当页面加载列表淡入时，每次过滤列表时，列表应该消失，然后淡入新内容。

我在页面加载工作中得到了淡入淡出。然而，当我试图让列表消失并再次淡入时，我无法让它工作。

这是我创建的一个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”）动画（{不透明度：0}）; 。jQuery的（ “＃elementId”）动画（{不透明度：1}）;

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

CSS3 Webkit-transition淡入/淡出

2 个答案: