# 为何transition有时不起作用?
我们要将某个属性(width, height...)使用transition属性时必须得注意, 属性必须是一个绝对值(0, 100px...), 比如auto或者根本没有设置属性值的情况下, 将没有过渡效果而是一个瞬变效果.
# 下面举一个例子
我要实现的效果是, 点击box它的高度会变化.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="area">
<div class="box"></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.area {
height: 100px;
border: 1px solid red;
}
.box {
width: 50px;
height: 1px;
border: 1px solid black;
transition: all 1s;
background: #000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
document.querySelector('.area').addEventListener('click', ()=>{
document.querySelector('.box').style.height = '200px'
})
1
2
3
2
3
如果.box的height设置为auto或者根本不设置height属性. 那么这个动效则是瞬变的