css3过渡效果的那些坑
坑一：
下面这段代码：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto;
}
.test{
width: 100px;
height: 100px;
background-color: pink;
margin: 200px auto;
transition-property: width;
transition-timing-function: linear;
transition-duration: 2s;
}
body:hover .test{
width: 300px;
height: 200px;
background-color: orange;
transition-property: height;
}
</style>
<body>
<div class="test">
</div>
</body>
</html>
先执行transition-property: height;这个效果，后执行 transition-property: width;
坑二：
下面这段代码：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto;
}
.test{
width: 100px;
height: 100px;
background-color: pink;
margin: 200px auto;
transition-property: width;
transition-timing-function: linear;
transition-duration: 2s;
}
</style>
<body>
<div class="test">
</div>
<script>
var test = document.querySelector(".test");
test.style.width = "300px";
</script>
</body>
</html>
这段代码不执行动画过渡效果，主要原因是transition在元素首次渲染页面没有结束情况下，是不会被触发的。
想要触发只需要将javascript那段代码改成：
window.onload = function(){
var test = document.querySelector(".test");
test.style.width = "300px";
}
添加一段window.onload即可，window.onload代表页面加载完成执行。
