通过定时器给元素添加类名改变样式，触发过渡，但是为什么没有效果？？？
通过点击事件给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>
到底是因为什么？？？？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你写的那个叫CSS多类选择器，只有在一个class同时有两个类时才会生效