发新贴  快速回复

关于transition的位置写在变换之后,为什么变换的时候还是3秒的?

Shark
2017-08-15 22:59
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#f9f9f9;}
#menu{width:50px;height:50px; position:fixed;right:20px; bottom:20px; }
#menu_list{height:42px;width:42px; position:relative;margin:4px;}
#menu_list img{ border-radius:21px; position:absolute;left:0;top:0; -webkit-transition:0.5s all ease;}
#home{width:50px;height:50px;background:url(home.png) no-repeat; border-radius:25px; position:absolute; left:0;top:0; transition:1s;}
</style>
<script>
window.err==function()
{
    var oHome=document.getElementById("home");
    var aImg=document.getElementById("menu_list").getElementsByTagName("img");
    var bOff=true;
    var iR=-150;
    for(var i=0;i<aImg.length;i++)
    {
        aImg[i].err==function()
        {
            
            this.style.WebkitTransform="scale(2) rotate(-720deg)";
            this.style.opacity=0.1;
            console.log(this.style.opacity,"1opacity")
            this.style.transition="3s";//关于transition的时间写在变换之后,为什么变换的时候还是3秒的,按照js的读取顺序应该是先变化完成之后才会读取到,之前的变换应该瞬时的才对额?
            console.log(this.style.transition,"1transition")
            /*addEnd(this,end);*/
        };
    }
    
    oHome.onclick=function()
    {
        if(bOff)
        {
            this.style.WebkitTransform="rotate(-360deg)";
            for(var i=0;i<aImg.length;i++)
            {
                var oLt=toLT(iR,90/4*i);
                aImg[i].style.transition="0.5s "+i*100+"ms";
                aImg[i].style.left=oLt.l+"px";        
                aImg[i].style.top=oLt.t+"px";
                aImg[i].style.WebkitTransform="scale(1) rotate(-720deg)";
            }
        }
        else
        {
            this.style.WebkitTransform="rotate(0deg)";
            for(var i=0;i<aImg.length;i++)
            {
                aImg[i].style.transition="0.5s "+(aImg.length-i-1)*100+"ms";
                aImg[i].style.left=0+"px";
                aImg[i].style.top=0+"px";
                aImg[i].style.WebkitTransform="scale(1) rotate(0deg)";
            }
        }
        bOff=!bOff;
    };
};
function toLT(iR,iDeg)
{
    return {l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
}
</script>
</head>
<body>
<div id="menu">
    <div id="menu_list">
        <img src="prev.png" alt=""/>
        <img src="open.png" alt="" />
        <img src="clos.png" alt="" />
        <img src="full.png" alt="" />
        <img src="refresh.png" alt="" />
    </div>
    <div id="home"></div>
</div>
</body>
</html>
 
Reci

代码的执行顺序是从上到下,但是这里涉及到css渲染机制,可以看下以下链接了解下css原理,http://www.cnblogs.com/web-ed2/archive/2011/08/03/2126748.html,浏览器是如何渲染页面和加载页面下面的第五个,所以css样式的执行是在代码执行后,进行分析,再一次性渲染的,不是写一行执行一个样式

2017-08-21 14:09  回复本帖
Shark

Reci 2017-08-21 14:09发表的内容:

代码的执行顺序是从上到下,但是这里涉及到css渲染机制,可以看下以下链接了解下css原理,http://www.cnblogs.com/web-ed2/archive/2011/08/03/2126748.html,浏览器是如何渲染页面和加载页面下面的第五个,所以css样式的执行是在代码执行后,进行分析,再一次性渲染的,不是写一行执行一个样式

哈哈,不要骗我哦,第五条写的是“样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染”是外部的样式表额,(问题1)跟这里的js中的样式又没有关系?(问题2)您说的“所以css样式的执行是在代码执行后,进行分析,再一次性渲染的”这里指的---代码执行后,具体指的是什么代码执行之后呢?在该案例中貌似js里写的全部都是写样式的重新更改

2017-08-21 19:13  回复本帖
 
莫涛

this.style.WebkitTransform="scale(2) rotate(-720deg)"; this.style.opacity=0.1;

var _this = this;

setTimeout(function(){

_this.style.transition="3s";

},30);

2017-08-21 20:52  回复本帖
Shark

小莫老师,您这代码是什么意思,没理解,30毫秒之后增加过渡为3s的样式?这个和我的问题有什么关联吗,您是在提示什么呢没明白额

2017-08-21 22:06  回复本帖
 
Reci

Shark 2017-08-21 19:13发表的内容:

哈哈,不要骗我哦,第五条写的是“样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染”是外部的样式表额,(问题1)跟这里的js中的样式又没有关系?(问题2)您说的“所以css样式的执行是在代码执行后,进行分析,再一次性渲染的”这里指的---代码执行后,具体指的是什么代码执行之后呢?在该案例中貌似js里写的全部都是写样式的重新更改

这是css的一个渲染机制,不是在对样式表才产生作用,包含js添加的代码,在一定时间内解析出来的样式会一起渲染,所以莫莫老师意思是,如果你想分开渲染,要给后一条样式加定时器,总结下:css样式的渲染速度低于代码执行速度

2017-08-22 16:03  回复本帖
Shark

Reci 2017-08-22 16:03发表的内容:

这是css的一个渲染机制,不是在对样式表才产生作用,包含js添加的代码,在一定时间内解析出来的样式会一起渲染,所以莫莫老师意思是,如果你想分开渲染,要给后一条样式加定时器,总结下:css样式的渲染速度低于代码执行速度

一定时间是个很玄乎的概念额,超过30毫秒就不是一起渲染了吗?其实30毫秒也是挺短的呢

2017-08-22 17:24  回复本帖
 
Reci

Shark 2017-08-22 17:24发表的内容:

一定时间是个很玄乎的概念额,超过30毫秒就不是一起渲染了吗?其实30毫秒也是挺短的呢

时间的话也是看网络情况的,所以不可能固定哦~这边的话,主要是给你展示下如何把样式分开渲染,可以尝试下自己缩短定时器的时间~看看极限在哪里

2017-08-22 17:29  回复本帖
Shark

Reci 2017-08-22 17:29发表的内容:

时间的话也是看网络情况的,所以不可能固定哦~这边的话,主要是给你展示下如何把样式分开渲染,可以尝试下自己缩短定时器的时间~看看极限在哪里

嗯,还有没回答呢,(问题2)您说的“所以css样式的执行是在代码执行后,进行分析,再一次性渲染的”这里指的---代码执行后,具体指的是什么代码执行之后呢?js中err==function(){}中的function(){ 这里的代码全部执行完之后 }的意思吗?

2017-08-22 17:48  回复本帖
 
Reci

之前莫莫老师给你的案例上面让你延迟30毫秒,就不会一起执行了,所以也要看你的代码

在你的贴的代码中是err=的function(你点击了的那个)里面的所有代码

2017-08-22 19:12  回复本帖
Shark

Reci 2017-08-22 19:12发表的内容:

之前莫莫老师给你的案例上面让你延迟30毫秒,就不会一起执行了,所以也要看你的代码

在你的贴的代码中是err=的function(你点击了的那个)里面的所有代码

嗯,怎么说呢,感觉这里说的---代码执行之后,是不是应该理解为js中err==function(){}中的function(){ 这里的代码全部读取完之后 }的意思更合适吧?先吧这些代码读取完成在执行css的渲染,这样的一个流程(第一点的理解是否正确)。

     另外我不认为延迟30毫秒就是没有立即执行,setTimeout()本身是立即执行的只不过setTimeout(里面的函数执行)隔了30毫秒而已;(这个就是原本我意思的err==function(){}中的function(){   “ 这里的代码全部执行完之后”  相当于函数里面的代码被执行 })--第二点的理解是否正确

Tips:有两个理解的问题哦

2017-08-22 21:51  回复本帖
 
Reci

Shark 2017-08-22 21:51发表的内容:

嗯,怎么说呢,感觉这里说的---代码执行之后,是不是应该理解为js中err==function(){}中的function(){ 这里的代码全部读取完之后 }的意思更合适吧?先吧这些代码读取完成在执行css的渲染,这样的一个流程(第一点的理解是否正确)。

     另外我不认为延迟30毫秒就是没有立即执行,setTimeout()本身是立即执行的只不过setTimeout(里面的函数执行)隔了30毫秒而已;(这个就是原本我意思的err==function(){}中的function(){   “ 这里的代码全部执行完之后”  相当于函数里面的代码被执行 })--第二点的理解是否正确

Tips:有两个理解的问题哦

两个理解都正确

2017-08-22 22:32  回复本帖
Shark

Reci 2017-08-22 22:32发表的内容:

两个理解都正确

嗯,现在就比较明确了,以后就记住js中的css渲染步骤:是先把js中的代码读取完全之后再渲染的(正解答案)
谢谢Reci老师,这么晚依然不辞辛苦的解答!

2017-08-22 22:56  回复本帖
登录 后才可以发表回复