玩 JavaScript 和 CSS 过渡，我试图删除一个 CSS 类 在使用 JavaScript 和 innerHTML 动态插入一个 div 之后。
我真的很惊讶地看到与蓝色 div 的不透明度相关的 CSS 转换没有按照我想要的方式触发(在 Safari 下工作，在 Chrome 下随机工作，在 Firefox Dev Edition 下不工作)。有人可以解释这种现象吗？
我不确定为什么它的工作方式与红色 div 的工作方式不同。也许我不知道浏览器如何处理 innerHTML ？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Having fun with JS</title>
<style>
.std {
width:100px;
height:100px;
opacity: 1;
transition: opacity 5s;
}
.std--hidden {
opacity: 0;
}
.std--red {
background-color: red;
}
.std--blue {
background-color: blue;
}
</style>
</head>
<body>
<button>click here</button>
<div class='std std--red std--hidden'></div>
<div class='insert-here'>
</div>
<script>
// let a chance to the browser to trigger a rendering event before the class is toggled
// see http://stackoverflow.com/a/4575011
setTimeout(function() {
// everything works fine for the red div
document.querySelector('.std--red').classList.toggle('std--hidden');
}, 0);
document.querySelector('button').addEventListener('click', function(e) {
var template = `<div class='std std--blue std--hidden'></div>`;
document.querySelector('.insert-here').innerHTML = template;
setTimeout(function() {
// Why does the CSS transition seems to be triggered randomly ?
// well more exactly
// - it works under my Safari
// - it does not work under my FirefoxDeveloperEdition
// - it works randomly under my Google Chrome
document.querySelector('.std--blue').classList.toggle('std--hidden');
}, 0);
});
</script>
</body>
</html>
编辑
所以我刚刚阅读了 CSS transitions specs并找到了这个
This processing of a set of simultaneous style changes is called a style change event. (Implementations typically have a style change event to correspond with their desired screen refresh rate, and when up-to-date computed style or layout information is needed for a script API that depends on it.)
这可以作为某种解释吗？ setTimeout 0 在某些浏览器上是否太快以至于他们没有时间计算样式差异，因此不会触发样式更改事件？事实上，如果使用更长的 setTimeout(比如，~16.6666，猜测 1/60 的刷新率......)它似乎无处不在。有人可以确认吗？
最佳答案
我想我已经找到了答案，请参阅 CSS 3 transition spec :
Since this specification does not define when a style change event occurs, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.
我尝试添加一点延迟让浏览器注意到样式差异并且它始终如一地工作。似乎某些浏览器执行 setTimeout 0 的速度确实比其他浏览器快 :-)
setTimeout(function() {
document.querySelector('.std--blue').classList.toggle('std--hidden');
}, 17);
关于javascript - 尝试使用 JavaScript 触发 CSS 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35805052/