结论
浏览器DOMContentLoaded事件触发和css是否加载完成是没有关系的。我们要获取到css属性必须使用Element.getBoundingClientRect()或者Window.getComputedStyle()等方法去获取元素的css值，你也可以用其他方式去获取元素的css值，都会去触发主动计算元素的css值。从而生效css3动画。
分析
我们一直习惯把css放在最前面，把js放在文档的最后面。可是发现有一个现象就是我们这样做之后，我们在ready事件，其实也就是检测DOMContentLoaded事件的时候去访问css的属性是访问不到的。我们必须要主动去调用
- css没有加载完就直接设置元素属性执行的例子,这里的动画并没有生效
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test {
width: 200px;
height: 200px;
transition: height 2s;
background-color: red;
}
.height {
height: 300px;
}
</style>
</head>
<body>
<div class="test">
</div>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
var $test = document.querySelector('.test');
$test.className += ' height';
});
</script>
</body>
</html>
- 使用Element.getBoundingClientRect()使动画生效的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test {
width: 200px;
height: 200px;
transition: height 2s;
background-color: red;
}
.height {
height: 300px;
}
</style>
</head>
<body>
<div class="test">
</div>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
var $test = document.querySelector('.test');
$test.getBoundingClientRect();
$test.className += ' height';
});
</script>
</body>
</html>
jquery的ready事件原理
- 待续
