为何通过动态添加class得不到想要的动画效果？
<html>
<head>
<style>
.modal{
position: absolute;
border: 1px solid black;
top: 200px;
left:200px;
transform: translate(0, -100px);
transition: transform 2s;
display: none;
}
.change{
transform: translate(0, 0);
}
</style>
<script>
window.onload = function() {
var modal = document.getElementsByClassName('modal')[0];
var btn = document.getElementById('btn');
btn.onclick = function () {
modal.style.display = 'block';
modal.className += ' ' + 'change';
//setTimeout(function(){modal.className += ' ' + 'change';}, 1) //这样就有效果
}
}
</script>
</head>
<body>
<button id="btn">click</button>
<div class="modal">123</div>
</body>
</html>
这是我写的代码，为什么通过定时器添加就有效果？而直接添加却没用
Cats萌萌浏览 1054回答 1
1回答
随时随地看视频慕课网APP
相关分类
JavaScript