<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>這是我寫的代碼,為什么通過定時器添加就有效果?而直接添加卻沒用
為何通過動態添加class得不到想要的動畫效果?
Cats萌萌
2018-08-10 09:09:00