css3过渡效果的那些坑

坑一：

下面这段代码：

   

   

   

   

 

       

       

先执行transition-property: height;这个效果，后执行  transition-property: width;

坑二：

下面这段代码：

   

   

   

   

 

       

       

       

这段代码不执行动画过渡效果，主要原因是transition在元素首次渲染页面没有结束情况下，是不会被触发的。

想要触发只需要将javascript那段代码改成：

window.onload = function(){

            var test = document.querySelector(".test");

            test.style.width = "300px";

        }   

添加一段window.onload即可，window.onload代表页面加载完成执行。