javascript - 为何通过动态添加class得不到想要的动画效果？
本文介绍了javascript - 为何通过动态添加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>这是我写的代码，为什么通过定时器添加就有效果？而直接添加却没用
解决方案
可能是transition属性和display：hidden 结合使用有问题吧。如果你在执行了modal.style.display = 'block'; 之后阻塞一下，alert();动画效果就会展示出来。浏览器处理的时候可能是因为元素是隐藏的就把动画效果去掉了。
这篇关于javascript - 为何通过动态添加class得不到想要的动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
