CSS3 Webkit转换淡入淡出

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

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

我在页面载入工作中淡入淡出。但是，当我试图让列表消失并再次消失时，我无法让它工作。

这里是我创建的jsfiddle来演示我正在尝试做什么。 - http://jsfiddle.net/YeKX2/28/

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

来源

2011-08-16 levi

在多个网站上发布相同的问题被认为是不好的礼仪。我在这里和Forrst看到了这一点，只能假设有其他地点。原因是它可能在一个地方解决，其他人则浪费他们的时间在其他地方帮助你。 – joshnh

你是对的。我在这里发布了这个，因为最初我没有得到任何答案，并打算删除第一篇文章。我的坏 – levi

保持它主要基于WebKit和不使用jQuery，你似乎是，你可以做到以下几点，以实现自己的目标：

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

你必须玩的时间。

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

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

来源

2011-08-16 02:39:23

我强烈建议包括jQuery库，如果可能的话。然后，淡化如下：

jQuery（“＃elementId”）。animate（{opacity：0}）; jQuery（“＃elementId”）。animate（{opacity：1}）;

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

来源

2011-08-16 02:26:26 Coomie

我不想包含JQuery文件大小的问题。我不担心兼容性问题，因为它被用于支持webkit转换的本地WebOs App。 – levi

您可以将这些语句合并为一个语句，以使代码更清晰，还可以指定计时器以使其更具体。 $（'＃selector'）。animate（{opacity：1}，2000）.animate（{opacity：1}，2000）;' –

1.对不起，我认为在CSS3中开发时很奇怪如此不受支持。我发现jQuery克服了许多不兼容问题，但是如果你没有预料到它们......太棒了。谢谢，我知道这一点。我正在举例淡入淡出。 – Coomie

CSS3 Webkit转换淡入淡出

回答

相关问题