javascript - css3过渡效果

Question

我想点击下面的每个li
让的的data-pic里的图片路径显示到popbox里
但是在他们切换的时候会图片会一闪一闪的
我给popbox加了个过渡的效果
transition:all 0.3 ease,不过初始没点过的还会一闪一闪
但点过了的就有过渡效果，这个要怎么才能解决?

<p class="popbox"></p>
<ul class="ul1">
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
    <li data-pic='xx.png'></li>
</ul>

Answer 1

$("li").on("click",function(){
    var Img = new Image();
    Img.src = $(this).attr("data-pic");
    Img.onload = function (){
        $(".popbox").empty().append(Img).hide().fadeIn();
    }
})

http://runjs.cn/code/4nyycv30

Answer 2

不是所有的属性都支持css3动画，background-image就是是不支持，看mdn上的这里

Answer 3

没点击过的图片，浏览器没有下载过，第一次加载是要下载的，自然慢些，应该是在你的CSS过渡效果完成之后才下载好的吧。。。

点击过的图片，浏览器已经下载过了，可以立即从缓存里面拿到图片渲染，所以会先渲染图片，再执行那个CSS动画。

你可以试试把图片预加载出来再尝试点击。

最简单的预加载图片的办法，写几个Img标签隐藏起来或者大小设置为0

Answer 4

正好遇到这个问题，可参考
http://www.w3cplus.com/css3/using-multi-...

Answer 5

1楼是标准答案，JS权威指南上有说过这个问题。