Javascript 通过JS启动CSS转换不起作用

我想启动一个CSS转换，如果单击按钮，它会更改背景颜色和维度。但代码中有一个错误：

jQuery

$(function() {

$('#change').click(function() {
    $('#box').addClass('change');
});
});

HTML

---

HTML&CSS中按钮的id（

#按钮

）与JS中按钮的id（

#更改

）不同，这就是原因

如果将JS中的

#更改

替换为

#按钮

---

---

注意：当您列出各种浏览器的转换规则时，您不需要

-ms-

一个（IE10支持未固定的转换，IE9根本不支持它们；

-ms-

前缀只在早期IE10预览时需要），并且您应该始终将未固定的一个放在最后。此时，.

您的

按钮的Id

是

按钮

，而不是

更改

使用

$（'#按钮'）

而不是

$（'#更改'）

.

它应该使用#按钮

根据你的HTML

<div id="button">click</div>

点击

---

您没有id为的元素（更改））

.start{

height:100px;
width:100px;
background: black;
transition: all 2.0s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
}

.change{
width: 200px;
height: 200px;
background:yellow;
}

#button{
width: 80px;
height: 20px;
padding: 4px;
margin: 5px;
border:solid 1px black;
 background: grey;
cursor: pointer;
color: white;
}

$(function() {
    $('#button').click(function() {
        $('#box').addClass('change');
    });
});

<div id="button">click</div>