className更改后的CSS延迟转换效果？

Question

我有CSS代码如下

#example { opacity: 0; transition: opacity 500ms; }
#example.visible { opacity: 1; }

使用此JavaScript使其可见

setTimeout(function () {
  document.getElementById('example').className = 'visible'
}, 500)

正如你所看到的，我的意图是在div被显示之前传递半秒钟。

如果我要继续使用JavaScript，我需要使用clearTimeout，以防'make visible'要求在前500ms之前被取消。

有没有办法将CSS用于此初始延迟？这样我就可以简化我的JavaScript了。

Answer 1

css过渡中有一个延迟选项

#example { opacity: 0; transition: opacity 500ms 500ms;}
#example.visible { opacity: 1; }

document.getElementById('example').className = 'visible'

http://jsfiddle.net/mowglisanu/68uUV/