31.尚硅谷_css3_过渡的天坑.wmv原创

我们来看两个课。过度的天坑，看一下只你什么意思，现在我不写JS代码啊，我先不用GS代码，好，我们来看现在我是不是就是这样一个元素啊，是不是放程我也不要了吧，没有没有没有没有任何意义吧。是吧，你看这边是不是有个元就就是有个元素啊，我说我让你这个外去产生一个变化，两秒钟什么时候在我波点和位博点在我不点我你这个不你看点后的，这是不代表一个状态。玻璃在后的时候吧，OK，这是不是一个后代选择器啊，找到它是什么test，你看这个这个选择器能不能看懂，前面是我薄点在被后状态的时候，你再去中它底下一个基因数，正常状态底下是选不到这个。这个这个选择这干嘛是匹配不到这个太子元素的，因为正常情况下我玻璃都不是备后，不知道能不解，只有在我玻璃后面的时候，你再去找它的test元素，OK来看我干嘛，我让你的。

全三星property变成。Hat是不是OK，我让你这个Y变成之前是180200PX hat变成200PX，好我问大家，首先我一上来我往玻璃，我鼠标后到玻璃上去是谁产生波动。是wise还是hat？首先我是不是注册了外，我说你待会外给我去产生一个变化。是不是，然后我是不是立马后不上去之后外就变成200了，我把这个属性是不是又给了黑，是不是，那首先上来是不是应该外有变化。当我手指，当我这个鼠标离开这个玻璃区的时候，应该是有变化。

现在我不是有个玻璃区域吗？是不是我鼠标进到玻璃区域里面去，去的时候谁有变化。我鼠标移出去时候谁有变化。他是不是好记住你们今天犯的错啊，看到看一下进去谁有变化。谁有过度？你看出去的时候是过多我是啊，从这堂开，从这堂课开始是你们思想上的一个转变，就从这堂课开始，看着上去时候高度性有变化，出去的时候宽度在有变化，是不是，你看我们一开始说放进去的时候是不是只给了外啊，照理来讲我是不是应该有个有个玻璃区啊，里面你有一个元素吧，我放进去的时候明显直接是什么啊，可是你会发现是had就好了，这就是。

异步什么意思啊，它跟异步是有关系的，想想我问你啊，这个代码被解析的快不快。就是代码大，想想现在我这边是不是有一个区玻璃区吧，里面有一个小，别说是不确实你一开始问你在我玻璃还没有喝上去的时候，确实应该是谁应该有过多。外啊，他我的内存结构里面第一次解析的时候，确实告诉了，告诉了浏览器，待会外给我去产生。过度是不是我问你，现在在我鼠标浮上去这一瞬间，这个代码要不被解析？CSS解析速度极快，是不是他现在告诉你到底谁应该产生过度，还是立马把内存里面这个外改成了太是吧，这个改的这个过程快不快，特别的快，改的这一瞬间我浏览器有没有反应过来，我要去页面上做动画了。

他能反应过来吗？就是我问你，你是不是把外改成可能是一个微秒级别的，可能就是把这一微秒，这一微秒的时间之内，浏览器有没有去渲染，根本来不及反应的，他是没有可能去做渲染的，就他是瞬间把这个外改成了。Cat真正当他去渲染的时候，他要去这个内存结构里面找，哎，我要去内存结构里面看看到底是谁，要去产生过渡一看，发现是谁是谁。Hat吧，你一开始不是once吗？立马被你改成了吗？那第一次应该谁产生波动，Hat产生波动，来看一下你上来。是不是还得产生过，是不是？我问你，现在我的全身性property是谁啊？现在就我这个，我我这个还没出去呢，内存结构那个全三星是谁，是不是那我手指移出去的这一瞬间。

本来应该是汉是不是，可是你一说这一瞬间，一微秒的时间之内，它立马把这个汉就变成了Y嘛，是不是变成Y时问题就把这个hand变成这个Y的过程不是又几块啊。这这一段时间之内，浏览器有没有去做动画，他做不了动画的，你太快了，没时间给他做动画，当他真正要去做动画的时候，你发现是谁啊。发现是Y是吧，那出来的时候是谁，你是是谁有过多。万岁。能不讲好，那这是你们思想上面的转变，就要从这边开始，能没讲好，那从这个阶段开始，香香呢，从这边开始，你们真正的要上路子了，能不理解啊，啊，就是一些代码，你要对它认识要更加的深刻了，那会一步一步加深你们对这个代码的理解，能不理解啊，OK啊，如果这个点卡住了，你今天晚上无论如何，哪怕不睡觉，你要把这个点给我过了啊，不然你以后的课，人家听这个课他的吸收是百分百，你听这个课你的吸收是10%，因为你压根没听懂。

那么你讲OK。好，这里OK，那这是第一个填坑懂不懂，好，这是跟我浏览器渲染机制有关系的吧，本身我CSS我JS的解析速度啊。极快是不是OK，我浏览器真正在页面上渲染动画的时候，渲染过程是不是要去画布局的，这个过程比你解析代码要来的慢，导致有一个时间差，导致你这些效果干嘛跟你想象的会不一样等等啊前端不简单啊，OK，这里看着好，这是第一个填坑啊，再来看任物。

过渡还有天坑。什么天啊，现在我们用JS来写。是不是标签是不是好，我这边是不是给他ID啊好，你们如果写单数的话，就可以不用去过分数了啊，直接开的点是带点了吗。改它的Y是吧，等于300PX是吧？是原来是100嘛，现在变成300嘛啊，你不要去获取这个元素了，可是我告诉他这只是在写DEMO的时候自己做测测试就可以，为什么？因为你是ID，热压器本身有个机子，就是如果你是ID的话，只有这两个名字一样，他就能找到ID是唯一的嘛，懂不懂也不需要挂一个test给什么都不需要去找了，可是写项目的时候不行啊，因为不是说说所有的浏览器都支持这种机制，懂不懂？我还是写吧，因为我上次这么做的时候，我发现有同学写写项目的时候居然也这么做，当时给我气的OK，这样行不行？

可以吧，好，这个时候问你，我这边是不是也有个过度啊，是不是，但现在想想这个时候我们看有没有什么停坑来看一下，照理来讲的话，我问大家要不要去产生沟通。谁产生过度万产生过度吧。是不是教你？你发现有过度吗？你是不是就觉得这什么鬼，是不是好好的，你看如果大家看到。看见没有，因为关系啊，这个解析有很大的关系啊，所以说啊，你们要开始入坑了，好前端的坑一个个来了，好，我来告诉他过渡身上的一个坑啊，OK，全三性。

全身形在元素首次渲染还没有结束的情况下，是不会被触发的，好，我问你，我在这边打一个alt，一个一，好我在这边那个一，大家知道会不会阻塞我整个D会是不是看着，好我让你看着，我在的时候背后有一个的血吗？没有，相当于我在解析，哎，我从第一个代码开始解析，我往我往下面解析吧，这是代码吧，我解析运到的脚本了，我是不要调GS引擎过来读读这个S脚本啊，OK，遇到音立马把渲染。

不会去渲染的，就在这边阻射的，等你什么点什么时候点这个确定按钮，你再往下跑，能不讲OK，而且我们也看到了是吗？你在这边的时候没有做任何的渲染工作，是不是也就说在执行这两行代码时候，问你这两行代码是不是义务代码？这两个代码是不是衣服代码，这两个代码是不是衣服代码？是不是这两行代码，是不是一步代码。这为什么是一个代码？只不过我前面一个嘛，阻塞了而已嘛，你就什么，你就我执行到这两行代码的时候，要不要让浏览器去做工作。要啊，为什么不要，就这两行代码，在我解析的过程当中，读到它的时候，要不要去做解析。

肯定要做解析啊，我们看我我们看我们刚刚的。刚刚你看问你这是不是一个异步代码。这是不是个衣服代码？这个是不是一步代码。不是浏览器在解析到这行代码的时候，问你要不要给去绑定一个欧的属线，要不要去搞，不要不要给去绑定欧的事件，有没有做工作做了这个这个这个执行过程是不是同步的。后面这个函数里面的代码才是一步代码。是不是啊，那你看一下我们现在呢。问你我遇到这个，我遇到这个时标签只不过这边给我注塞了一下，一旦我底确定时候是不继续下来进行解析啊，遇到这两行代码工作要这是同代吗。你能看到有任何的异步代码吗？不可能，异步代码是不是啊？那我就问你在解析这两行代码的时候，元素有没有在我页面上？

在解析这两行代码的时候，元素有没有在我页面上？看一下。你我在这边去干嘛，是不是暂停的是当时那个状态，也就是说页面保留下来，是你立马解析到第四十五行时候的那个状态，是不是啊，你解析到第45号的时候有去绘制吗？没有可能这个结构已经生成了，可是浏览器有往页面上面换吗？说明内存里面有没有东西，可能有了这个这个这个真的没有办法确定是不是，得看你这个电脑的性能，你这个浏览器是否好。是不是你用谷歌可能就快一点，你用IE可能就慢一点，对不？内存里面的东西咱们没有办法分析对不对，可是页面上的东西我们得看到，确实执行到第四次网代码的时候，页面上面还没有去报，是啊，可是我是不是能拿到。

这个元素说明这个元素的结构在不在，在可是没有绘制，能理解吗？也就是说我在执行第四次方法，在吗？我问你啊，如果我这个不行。就是哪怕我写了这个要常你看它是不是有动画了是吧，如果我这个东西不写，我问你这个东西不写，你看上来是不是没有任何的布设网，在解析第四十六四十七号的时候，元素有没有绘制完。你告诉我现在这个情况下，解析第四行，我打开览有没有啊，在解析第46行，47行代码的时候。有没有会？在解析第四行这个代码的时候，有没有会啊？肯定没渲染完啊，看一下我在这边他。

我这看着这你有没有会啊，这两个被解析过了，解析过了吗？有没有啊，没有吗。是不是OK，说明我在解析这两行代码的时候，大卡，那你为什么说，哎，老师你一刷你看见又有了，你看一下我打开这浏览器需要几秒，要不要时间啊。关掉，我打开这时间你看一直在吗？要不时间你们能看到最终是是解，可是执行到第46行，十十七行在这边，我让你停下来。有没有解决完没有，也就是说这个test.y等于300这个样式的改变发生在了首次渲染之。前后第47行代码改变这个外发生在了首次渲染之前。

你一开始外是100，立马把这个外改成300，这时候有没有过渡机制？没有过渡机制，为什么过渡？在元元素首次渲染还没有结束的情况底下，是不会被处罚的，相当于一开始你在那边造一个什么，造一个人。你说他什么高一米七，是不是后来想象不对，高一米八。那么这是一个瞬间初始化的过程，不会有任何的其他的过程过来干嘛干预的，除非你把这个人衣服穿上了，然后你把这个衣人衣服扒掉，然后你把它干嘛拔高了，再把它把衣服擦掉，那再把它把衣服穿上去，懂懂那这个在长高的过程当中，它是经经过什么一系列的变化的，懂不懂在他没有穿衣服之前，一个一个人拔高，那干嘛？就是只是简单的把他身高体拔高，需要脱衣服吗？不要说说这里面是没有什么任何的其他过程的，懂不懂，那这个全在性就可以把它是穿衣脱衣过程，能不理解啊，这能不理讲你说什么，其实这个工作是在做什么工作。

初始化工作，也就说其实一开始的时候，你在这边外100浏览器去的时候，有没有从100变成300的过程，没有，内存里面一开始是100，后来立马改成了300，最终渲染速度就是300懂不懂，没有100~300这个改变的过程懂不懂，所以记住这句话。选身形在原处首次渲染还没有结束的情况下是不会被触发的，选择性的天坑能不理解你聊过度得跟人家聊这些东西，不然你是没有办法打动人家的，懂吗？好，那想想，如果我把这两个代码。延迟执行什么时候叫延迟执行？放到window里面行不行？Window点的里面我就问你元素有渲染完，那肯定是已经渲染完了，Window的的代表整个页面渲染完，所有的资源从服务器端全部加载完了，才会触发这个事件，这是不是一个异步代码，在执行第47 48号的时候看一下。

一的时候看一下。诶，是不是页面上还是没东西啊，可是我问你window点的触发的条件是什么，整个渲染已经全部结束了吧，就内存这个结构已经全部加载完。加载完啊，只是你们现在页面上面还看不到这个浏览器本身内内部的规则有关系啊，你不要管它懂不懂，可是你要知道来看一下这干嘛，我这边如果没有人来看下好不好使。你看他没过多说明，在这边去执行的时候之前有没有给一个元素，给这个元素绑上一了。

绑上100了吧，懂不懂，而且是不是100~300的一个变化，这个时候要不要触发这个过度，要触发这个过度的懂不懂，说在元素首次渲染还没有结束情况下，是干嘛不会被处罚的，懂不懂，其实按照我们的理解的话，干嘛，其实A什嘛在这边去A1的时候干嘛应该有渲染了，懂不懂，其实它已经渲染了，只是还没有把这个东西放上来，它已经进行渲染了，所以你们在页面上没有看到而已啊，这个过程我们会放到以后再去讲。能不理解啊，就说千万不要干嘛，就是一定要有自己的思想，能不理解啊，就是看到这些东西的时候，你要知道怎么去分析，其实在这边执行分一的时候，我问你，你上面这些的东西的话，有没有触发过渡机制？一定是触犯过渡机制的，而且在这个时候肯定比你写在外面干嘛。

是不是要选选择多了，因为你在这边执行这个时机应该跟在这边去执行时机一样嘛，这个时候其实浏览器已经帮你做了很多工作了，好多初始关中都他都已经做完了，所以说你待的这两个环节是不一样。懂不懂这里没理讲。好，这里好，这是我们说什么？OK，你看这是不是就有过度了，你看如果没有温度的额度呢，是不可能有过度的。你看刷一下怎么刷都没过动啊，有了温度了，比如说我给个第四器行不行。我给电视机行不行，你就让他干嘛，等我浏览器帮你做完一些工作之后，你干嘛再来渲染上开的也行吗？是不是我说给个三秒钟。足够了，上面都足够了，把这么干嘛放进去问你能不能发过，为什么？因为这个三秒钟对览器来说就是个天文数字了，他已经做完了好多渲染工作了，这个元素的初始化渲染已经个吗结束了，懂吗？周你再来看说一下。

等三秒123。有没有肯定是有的，肯定是有一个嘛，过渡过程的懂吗？OK，好，那我问你，好，那我们再写一个。CTRLCCTRLV06。我我来问大家，比如说还是在window点里面，有没有可能在window点里面，你是触发不了这个五度的。或者说是这样，大家看我是不是这个test y等于300啊，你看我再来一行test y变成100，一开始是不是也是100，我就问你啊，这个Y的属性值有没有产生变化。

有没有没有。有没有从100到三百一个过渡，300再到一百一个过度，不可能看着。有吗？有吗？因为你干嘛一开始初始化的时候，100执行完时候你干嘛？哎首先说哎确实要让你变成300，立马覆带成了100，相当于什么？初始化的时候你说哎我的外在那水库里面告诉浏览器最多渲染是100是不是好初始化我渲染完了云度点欧的么？后来说哎我干嘛是不是要去改一些样式了，哎他说你这个外不行，不能是100，干嘛给我变成300是不是啊，刚刚改完他告诉你，哎不行，他应该是100，浏览器真正在去做动画，或者说去页面上面渲染的时候，有没有看到300啊，没有，他发现是100~100的一个过渡，属性值有没有产生变化，属性值没变化产生过渡吗？没有过渡。

就没有过动，真的没理讲，那再来，我问你有没有可能在温度点O里面。问，你这这个是不是有的，因为元素的渲染是在window.o之之前去做的，有没有可能在window.o里面去执行元素的第一次渲染？有没可能就是这个多么节点太这个节点是在我点的时候。再去做的第一次渲染，也就是说你你初始化渲染的时候是没有这个结果。我在这边多的点C什么创建一个。元素节点叫做div是不是，怎么办？找到。是吧？其实玻璃就是多个梦的点。

document.document是吧，这个就是玻璃吧，他去点个把这个test塞到。问到动数里面去是不是啊，这个时候我问你，我问你在这个时候是不是才是进行元素的第次旋是不是啊，我问你，那这边test掉Y等于300倍出啊。有能不能出发过度？就不吧。因为执行这行代码的时候，元素首次没选完。没有，为什么没有渲染，一开始你多么节点动数里面就没有，我是在文工作之后把你加进去。是这意思啊，可是这个跳是没有ID啊。我是不是只是在里面创建个底压力啊，你应该给他绑一个什么。

Test的点I应该等于多少？Test是的，不就这个节点吗？把它的变成300，看有没有过多。有没有没有吧，如果这样的time out，来一个方行，我问你这个时候有没有不动。比如说我会来个两秒钟，有没有因为在这个时候执行，这时候确认完，确认完了吗？OK，正一二。你们不懂，有过独了，好理解住这句话，懂不懂？我们写了好多好多情况了，你们讲啊，我这么讲是为了能让你们思想上有个转变，懂不懂？