关于transition，css教程中有一个很简单的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a {
transition: opacity .5s;
overflow: hidden;
display: block;
}
.a:hover {
opacity: 0;
}
</style>
</head>
<body>
<div class="a">testtesttesttesttesttesttesttesttest</div>
</body>
</html>
当鼠标悬浮于div上时，会渐变消失
但当opacity改为width，或者height时，过渡却不会发生！后来发现当改变width、height等时必须预先设定其高/宽，否则过渡失效！
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a { /*必须预先设定*/ width: 200px;
transition: width 2s;
overflow: hidden;
display: block;
}
.a:hover {
width: 0;
}
</style>
</head>
<body>
<div class="a">testtesttesttesttesttesttesttesttest</div>
</body>
</html>
时间： 2024-08-02 20:29:35