Question

CSS3的transition的问题！~！~求大神进！~

HTML部分
<img src="img.png" id="source">

CSS部分
#source{display:none;width: 678px;height: 381px;position: absolute;top:20px;left:20px;
-webkit-transition:all 1.5s;

}

JS部分
setTimeout(function(){
source.style.WebkitTransform="scale(1.3)";
source.style.display="block";
source.style.zIndex=(++z);
},2000);
当把 source.style.display="block";和source.style.zIndex=(++z);两个注释了，img才回有过渡效果，
如果不注释掉，img会直接变大，而没有过渡效果。

为什么呢？？？ 求详细解释~~ 我可以提高悬赏！！
我想到的解决办法是让transition只对transform起效，而不是all。
但是 如何才能让transtion只对transform或这transform：scale()起作用呢？？ 求兼容性 写法
或者你有什么好办法？？

Answer 1

setTimeout(function(){
    // 这里用setTimeout
    setTimeout(function () {source.style.WebkitTransform="scale(1.3)";}, 0);
    source.style.display="block";
    source.style.zIndex=(++z);
},2000);

追问

还是不行啊~！~

追答

我在chrome上可以的。。。

追问

貌似又可以了，能解释一下吗？

追答

从display none到block的时候不会出现transition特效的。

如果不使用setTimeout直接写的话，可能是执行完这三行之后一次渲染页面。

用setTimeout之后是执行完下面两行之后渲染页面，然后再执行scale。

追问

我知道你的意思了~ 那你知道如何才能让transtion只对transform或这transform：scale()起作用呢？？

追答

transition: -webkit-transform .3s;

追问

那为什么我设置transition只对transform作用时，也没效果的

追答

哦，这根对哪个有作用没关系。display:none block的时候都无效。