Javascript 动态添加过渡持续时间、可见性和不透明度不在chrome中工作的CSS类
我试图通过动态添加具有Javascript 动态添加过渡持续时间、可见性和不透明度不在chrome中工作的CSS类,javascript,css,google-chrome,css-transitions,Javascript,Css,Google Chrome,Css Transitions,我试图通过动态添加具有转换持续时间、可见性和不透明度的类来进行转换。单击“显示”按钮后，.overlay应在1秒后转换为红色颜色。它在firefox中工作得很好，但在CHROME&IE9中却不行 My chrome version: 31.0.1650.63 m HTML <div class="wrapper"> <div class="overlay"> </div> </div> <button>Show&
转换持续时间、可见性和不透明度的类来进行转换。单击“显示”按钮后，.overlay
应在1秒后转换为红色
颜色。它在firefox中工作得很好，但在CHROME&IE9中却不行
My chrome version: 31.0.1650.63 m
HTML
<div class="wrapper">
<div class="overlay">
</div>
</div>
<button>Show</button>
脚本
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.overlay').classList.add('show');
});
您可以使用以下选项进行转换：
-webkit-transition-duration: 1s;
看起来像是浏览器中的一个bug如果你问我，你应该向Chrome团队提交一份bug报告。然而，如果您删除了可见性
属性：@JonKoops，那么您的示例就可以运行，但是如果删除了可见性，它在FF中就不起作用。当您将chrome作为独立页面运行时，它对我是有效的，但当它从JSFIDLE运行时，它似乎是一个bug。我的chrome版本也是31.0.1650.63 m。IE9不支持CSS转换。@HectorWilliam你是rite！当它成为独立的时候，它对我很有用。那么问题到底出在哪里呢？在chrome或fiddle中，由于chrome 26，因此不需要供应商前缀声明。
-webkit-transition-duration: 1s;