您好,匿名用户

通过定时器给元素添加类名改变样式,触发过渡,但是为什么没有效果???

0 投票

通过点击事件给box添加类名以改变样式,触发过渡,但是box初始样式是通过过.box类名选择器设置的,添加的样式是通过#box.box添加的,没有过渡效果,将初始样式的选择器改成ID选择器#box就有了,有点不明白为什么??

题目来源及自己的思路

相关代码

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 过渡--transition 过渡不会自动发生,需要主动触发 */
        /* 1-过渡属性 2-过渡时间 3-过渡规则(过渡函数) 4-延迟时间 */
       transition:all 4s ease 0s;
    }
    #box.change{
        width: 500px;
        height:500px;
        background-color:green;
    }
    /* 过渡 */
</style>

</head>
<body>

<div class="box" id="box"></div>
<script>
    //获取box元素对象
    var box = document.getElementById('box')
    box.onclick = function(){
        console.log('点击了box')
        box.setAttribute('class','change')
    }
</script>

</body>
</html>

上面的写法没有过渡效果,将初始样式的选择器改为#box{}就生效了,郁闷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 过渡--transition 过渡不会自动发生,需要主动触发 */
        /* 1-过渡属性 2-过渡时间 3-过渡规则(过渡函数) 4-延迟时间 */
       transition:all 4s ease 0s;
    }
    #box.change{
        width: 500px;
        height:500px;
        background-color:green;
    }
    /* 过渡 */
</style>

</head>
<body>

<div class="box" id="box"></div>
<script>
    //获取box元素对象
    var box = document.getElementById('box')
    box.onclick = function(){
        console.log('点击了box')
        box.setAttribute('class','change')
    }
</script>

</body>
</html>

到底是因为什么????

用户头像 提问 2019年 5月25日 @ Rengar 中士 (1,221 威望)
分享到:

1个回答

0 投票
 
最佳答案
后来自己又思考了一下,想通了,图一的代码,setAttribute('class','change')相当于把box的class类重置了,box只有change类名了,初始样式没了,所以里面的transition也没了,正确的写法应该是setAttribute('class','box change')
用户头像 回复 2019年 5月25日 @ Shyvana 中士 (1,159 威望)
选中 2019年 5月12日 @Rengar
提一个问题:

相关问题

0 投票
0 回复 191 阅读
0 投票
1 回复 46 阅读
0 投票
1 回复 150 阅读
0 投票
1 回复 41 阅读
用户头像 提问 2019年 5月4日 @ Mordekaiser 中士 (1,242 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

IT技术交流群 - 随意问
欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...