为何通过动态添加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>

这是我写的代码，为什么通过定时器添加就有效果？而直接添加却没用

<html>
<head>
<style>
.modal{
    position: absolute;
    border: 1px solid black;
    top: 200px;
    left:200px;
    transform: translate(0, -100px);
    transition: transform 2s;
    opacity: 0;
}
.modal.change{
    transform: translate(0, 0);
    opacity: 1;
}
</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>

用opacity:0代替display:none;

因为是动画显示效果跟display没关系，这个属性没有中间状态的!

顺便接上面大神的代码：
将其 Opacity 属性修改为 visibility 属性，毕竟这是一个显示或隐藏的问题，而不是透明度的问题，展示效果是差不多的，没试过哪种性能好，严谨严谨哈哈哈

<html>
<head>
<style>
.modal{
    position: absolute;
    border: 1px solid black;
    top: 200px;
    left:200px;
    transform: translate(0, -100px);
    transition: transform 2s;
    visibility: hidden;
}
.modal.change{
    transform: translate(0, 0);
    visibility: visible;
}
</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();动画效果就会展示出来。浏览器处理的时候可能是因为元素是隐藏的就把动画效果去掉了。

【热门文章】