动态添加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市场是有一定道理的.
好吧我承认这是非常无聊的研究.