CSS Delay Transition 改变className后的效果？

Question

我有如下CSS代码

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

使用此 JavaScript 使其可见

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

如您所见，我的意图是在 div 可见之前延迟半秒。

如果我要继续使用 JavaScript，我将需要使用 clearTimeout，以防在第一个 500 毫秒之前取消“使可见”要求。

有没有办法使用 CSS 代替这个初始延迟？这将使我能够简化我的 JavaScript。

Answer 1

css transitions中有一个延迟选项

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

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

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