我想在#div 超时时添加一些过渡。我还在 setTimeout 方法中添加了 webkitTransition，但没有找到转换。请帮助我也编辑我的代码。
<!DOCTYPE html>
<html>
<body>
<style>
#div {
opacity: 1;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
background:#BD5557;
position: absolute;
height: 500px;
width: 960px;
}
</style>
<div id="div">Display out after 1 second</div>
<script>
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){ x.style.display='none';x.style.webkitTransition = 'opacity 2s ease-in-out';
x.style.transition = 'opacity 2s ease-in-out';}, 1000);
}
displayOut();
</script>
</body>
</html>
</body>
</html>
最佳答案
问题是您在应用转换的同时尝试应用 display:none;。
此外，如果在 css 中声明了所有 css 过渡属性，则无需重新应用它们。
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){
x.style.opacity='0';
}, 1000);
}
displayOut();
这是一个有效的 example
关于javascript - 使用纯 JavaScript 中的 setTimeout 方法向 div 添加一些过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31279922/