动态添加CSS3-transition.

动画过程由transition完成的滑动弹窗..可是始终是直接显示没有动画过程..把基本思路提出来试试.

1.

<head>
<style>
#box{height:0;width:0;background:red;-moz-transition:all 4s ease;-webkit-transition:all 4s ease;}
</style>
</head>
<body>
<script>
window.onload=function(){
    var btn=document.getElementById("btn");
    var o=document.getElementById("box");
    btn.onclick=function(){
        o.style.height='200px';
        o.style.width='200px';
    }
}
</script>
<div id="box"></div>
<button id="btn">11</button>
</body>

果断必须没有问题.

2.

<head>
<style>
#box{height:0;width:0;background:red;-moz-transition:all 4s ease;-webkit-transition:all 4s ease;}
</style>
</head>

<body>
<script>
window.onload=function(){
    var btn=document.getElementById("btn");
    
    btn.onclick=function(){
        var o=document.createElement("div");
        o.id='box';
        document.body.appendChild(o);

        o.style.height='200px';
        o.style.width='200px';
    }
}
</script>
<button id="btn">11</button>
</body>

有问题了,直接显示了.

3.

window.onload=function(){
    var btn=document.getElementById("btn");
    var o=document.createElement("div");
    o.id='box';
     document.body.appendChild(o);
    btn.onclick=function(){
        o.style.height='200px';
        o.style.width='200px';
    }
}

没有问题.

在理解中JS事件监听函数在处理过程中只是预编译一下,而不进入解析.要在事件触发是才进行处理的.

那就意味这transition这个东西需要一定的准备过程?

4.

window.onload=function(){
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        var o=document.createElement("div");
        o.id='box';
        document.body.appendChild(o);
        setTimeout(function(){
            o.style.height='200px';
            o.style.width='200px';
        },0)
    }
}

FF不行,chrom可以.

有趣的是把时间调成13-16时,刷新FF一下可以,一下不行.

我不知道这是因为两个浏览器对CSS3支持的区别呢还是两个JS引擎解析速度的区别.

由此看出chrom抢占FF市场是有一定道理的.

好吧我承认这是非常无聊的研究.

posted @ 2012-10-12 14:45  zwei1989  阅读(1230)  评论(0)  编辑  收藏  举报