问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为何通过动态添加class得不到想要的动画效果？

头像
quietwait
    3841121
    <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>

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

    cssjavascript
    阅读 5k
    3 个回答
    得票最新
    头像
    scort
      8.4k2633
      ✓ 已被采纳

      可能是transition属性和display：hidden 结合使用有问题吧。如果你在执行了modal.style.display = 'block'; 之后阻塞一下，alert();动画效果就会展示出来。浏览器处理的时候可能是因为元素是隐藏的就把动画效果去掉了。

      头像
      guangpunba
        5.4k42754
        <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;

        头像
        Aiello_Chan
          86011117

          因为是动画显示效果跟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>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题