30.尚硅谷_css3_过渡完成事件.wmv原创

我们再来看好刚讲的是过渡的几个API吧，还讲了一个它的一个列表的一个坑是不是啊，好，再来讲检查过渡是否完成啊，OK，我们来看一下这是什么意思，CTRLC啊，这跟其有关系，OK，零三过渡好了看一下。好，现在我来写一段DEMO，好，window.onload是不是加上，会不会写等于放是不是OK，中影好，来看一下。好，我们说先去外什么。一个test吧，好，一般在这边命名的时候稍微好一点，就test not或者说test都可以了，懂好，document.q y query select，找到谁。找到这个test是吧，找到test之后怎么办？Test no给他去绑。保持事情呢，我再也不通过什么后边来处理了，是吧，我说你这个test not点。

啊。怎么办？嗯，在谁身上去加时间。Document是吧，嗯，Document document。Element，这是找到那个跟标签啊，其实就是我们这边是什么。玻璃吧，你要是你要是你要是现在嘛，还不懂这个东西，我们干嘛先挖一个玻璃漏的啊，一般不会超出玻璃这边做的有点菜等于什么都可点Q压完可不可以一样嘛么找到做什么。玻璃吗？是不是问你这个query select是不是里面找的是选选择器啊，这里面这个select是不是永远只返回一个元素啊，如果你呢。返回的是一个数组吧，是不是OK，就你那给他占个世界嘛，在欧某斯。

Over吧是吧，不就跟那个一样吗？等一个方形吗？是吧，怎么办？点一个方向，哎，我想问这里面这个list是谁啊。嗯。这是不是就他啊OK啊，这个认识这个机制之后，我们再来讲啊，你们详细的把this解里面this机制从头讲到尾啊，那这里面要干嘛，我说在你over上去时果它是什么掉点。什么WDY是吧，等于。300PX是不是一样？应该会产生过渡吧？哎，因好像是不是有延迟啊，延迟干掉吧，是吧，这个时间也给他稍微走的快一点吧，两秒这你刷一下，你看是不是有啊，只要牧斯上去是不是就可以啊，OK，走你那我出去还有吗？没有出去我没有改变这个外。

有没讲OK走你嗯，然后怎么办，然后我们说哎，有个叫有个有个叫什么检测过渡是否完成，这什么意思呢？就说什么当过度完成时，会触发一个事件，在符合标准的浏览器之下，这个事件是全三星。End的啊，OK，就是有个叫全三性end的事件，当过度执行完就会触发这个事件，能不理解好来看一下，哎，我来问你啊，这种绑定形式是叫什么？绑定提示事件的叫嗯，叉叉叉是不是。是不是你说你土不土，一天到晚轰叉叉叉，你说他们能听懂吗？啊，记住这个么，多零多零事件啊，那还有还能怎么去把事件，还有个叫多二，就这是定义在动动一之前，就是动规范出来之前，事件就这么写的，这叫多零事件，在多姆的第二个规范里面，我们出来一个新的世界。

Test的，我们是这个东西产生过度啊，那他是不是过渡完会触发个事件呢？怎么把爱的1LISTEN呢？啊，这是多二里面定义的新的一种什么事件的定义形式啊，OK，那叫什么全3END，那没讲，不用带。哦，这应该讲过吧，是不是，OK，这里来一个方形，这好，那在这边玩的时候应该怎么玩。我们说你这个时候是不是只要你产完成过渡，就应该触发这个全限的事件啊，比如说我让在里面了一个什么over是不是OK，你看看能看他能不能出发这个时间走你。

哎，是不是有了，OK来看，那这个事件都是对于这个元素而言呢，还是说对于你这些过渡属性而言呢。也就是说，如果我有两个属性产生过渡吧，是不是，那怎么办，这边干嘛还得加一个。吧，那这个时间到底触发几次啊？是不是啊，就你看看刷一下。第一个。两个啊，它是一个什么属性维度的时间，不是元素维度的时间。能理解吗？什么意思？也就是什么？每一个拥有过度的属性，在其完成过渡时都会触发一次全对性的事件。是谁啊？属性懂吗？OK，下面还有一句话，在全三性完成前设置闹事件是不会被触发的。

问，你现在我这个过渡需要几秒钟完成？200万成是不是我在你这个过渡完成之前，我能不能先干嘛上来斯no的点什么。点电play直接等于一个no，可不可来看一下这里，看这个事件还能不被触发这里？还有时间吗？你连过度效果都看不到了吧，所以说你如果在这个过渡完成之前，你就把这个元素的标标设置成到了。那干嘛，那就没了，懂不懂那我这么写了。这么写的有没有，这么有没有，有没有没有给我改变一种编程思想，你们现在这个编程思想，如果你觉得什么，如果你觉得是先完成什么过渡的，再去改变display的，你这叫过程式的编程思想。

跟着代码一行行走的，在前端过程式的编程事项会坑你很久，你要把这种过程式的编程事项给我改掉，前端有好多异步的。懂不懂说你不是说不是所见即所得，那么讲大看现在我是不是等于300，等于300，我问你有最终去渲染吗。没有。没有什么时候去渲染。你等元素出来了，我是不是欧魔生目放上去啊，他立马进行渲染啊，立马进行渲染什么立马来调这三行代码，调这三行代码的时候我问你。也就是说我是不是要执行这个过渡啊。是不是啊，那我问你是不是在我浏览器的内存当中，是不是其实已经什么准备了，好多预备工作了，他说你的Y电话变成300，你的汉电话变成300，你的第四边要变成闹吧，问你这个过度有没有处罚？

过渡有没有触发，动画有没有开始啊没有呢，就是你在鼠标浮上去这一瞬间，他立马把这三个代码读了吧，诶发现你这个最终的吗？说变成闹的，那还会触发这个事件吗？就不会了，过渡效果还有吗？没有了。那没讲说一定要有一个异步的思想，那没讲，所以说因为你要知道你GS引擎读代码是很快的，浏览器去渲染是啊，要比这个GS引擎是来的慢的。因为你要最终去我浏览器上面干嘛，你看我如果想让大家看，我如果想要去过渡，是不是首先这些元素你得帮我在上面给我画出来，然后我浮上去后你才能去啊，才能过渡啊，你想想，可是我问你我欧上来的这一瞬间，是不是先要在我浏览器的内存当中去做一些解析的懂不懂，这个时候他在解析的时候发现连这个你这个是第二点。

掉，那最终他干嘛，你看他上来是怎么做的，走你那上来直就把你把你被腾到了，因为你这过度还有意义吗。你这个宽高的改变还有意义吗？最终都是干嘛？要及时，别人闹的懂不懂好，所以千万不能用这种过程式的什么变成思想，能不理解OK。好，那到这一块是不是我们讲了，讲了一个事件啊，那讲好到这一块过渡最基本的东西，我们讲完了这个能不能过，有没有没有听懂的。有没有听懂的，哪个不明白，上去立马就没了。然后是由。这一块吗，是不是这块是不是不明白。大家想啊，问你我这些东西，我问你现在是不是要去我浏览器上面去做渲染的是吧？问你这些东西，问你这些东西能出现在浏览器上面，说明你是不是整个页面的绘制已经结束了，而且我们还说过，我们说这些GS代码因为包含在了window.o的里面嘛，这个函数的触发是要等你界面渲染完才会触发的吗？能不理解啊，那也就是说现在问你到我这一块是不已经全部渲染完了，这三行代码有没有实际的被被我读到。

有没有？有没有做到没有，这是一个事件，这是异步的，什么叫异步的，并不是说哎，我在解析这个代码的时候，就会把你这些代码全部给你解析掉，不是的。懂不懂他干嘛，他上来解析是干嘛，因为渲完了来，他说给你window.o的知吗？把一个时间码，其实在解析的时候，它只做一件事情，给window这个元素绑定的一个事情，就是on的，它有个函数，等你页面渲染完，我来调这个函数，也就说当你页面刚刚渲染完就过来调这个函数了。

就执行这里面代码了，可是问你在执行这里面代码的时候，问你这个方式里面内容有没有被执行到。这个方形内容有没有被执行到？都没有，这都是异不代码不讲，OK，那也就说现在我你比如我刷一下，我问你现在这个过程的时候，这三行代码有没对知道。有没有没有，什么时候去解析，鼠标刚刚放上去的时候，立马去解析这三行代码吧，是不是，我问你要不要重新绘制。你的宽高度改变了。要不要重新绘制啊，肯定要重新绘制啊，你是不是看到你界面上的元素它变了，浏览器要不要重新绘制啊，这跟我们之后讲的一个很深的概念，就重复重标上有关系啊，先理解听不懂没关系，可是可是你先尽量去理解啊，能不理解啊，比如说当我这个什么鼠标放上去这一刹那才来自行这三的代码是不是啊？OK，告诉浏要器的内存干嘛？我说待会我要来自行这三的代码吗？它可能会在内存结构里面去做解析啊，你待会这个Y要变成300HAD要变成380，你等会变成300HAT，你要变成300DISPLAY你要变成。

No，那他是上来一步步干吗哦，先把你的Y变成300，还变成300之后在我页面上面选完再来把你这个倍变成now。你说这样好吗？不好啊，为什么最终你的不是都要去闹的吗？那干嘛？你还能看到这个过程吗？你就看不到这个过程了，浏览器它有做这个工作吗。他其实就没有做这个工作，为什么？因为你的时候其实就是零。相当于你这边一开始Y外跟他的什么是300，因为最终解析到点的腰围变成到吧，我就要那个嘛，就不帮你做了啊，虽然说他内部的原理可能不是这样的，差不多就这个意思，对不懂，他不会帮你去做一些重复的工作的，最终这个你是被直接变成到了，对不对，也就是说你这一行代码写在上面跟写在下面一样吗。

都一样。懂不懂？虽然说写在上面思考理解，可是不可能每次写代码时候都要思考那么多事情，写前端代码就是这样的，1245这个嘛，放在这里面来操作。懂不懂这里么理解，OK，那来看，那这个不会触发是不是就很正常了，因为你干嘛债务过度干嘛我们说的什么在display，在全三形完成前，你看是不是完成前啊，你设置display now，那时间就不会被除观了，那如果在全身形完成后呢。那肯定会触发吧，那怎么办啊，比如说个嘛，我这边来个定时线可不可以啊C奥特嘛，是吧，来一个方形，我来问大家过渡几秒，两秒，我让你三秒之后。再来执行代码，是不是这个时候我就问你。

这两部浏览器有没有去渲染，肯定去渲染啊，你这三秒时间太长了，能没讲神秘意思，我们来看看。上来你看有没有这个过程，有，而且在这边卡住。卡住了吧，等三秒之后，你会发现有没有给你弹出那个什么，那你有没有把他这个第十遍道定时器的三秒准不准。不准，先记住这个概念，定时器是不准的，懂不懂？你看现在不是等了四秒五秒了。有吗？没有over，只有你立马没了，这个三秒准不准，理想在最最理想的情况底下，这个三秒才是准的，先有个概念之后我们会细讲，不懂你先知道定时器的这个时间是不准的，对，不讲OK，而且我说是不是在你这个过渡完成之前。有没有？

没有啊，你是在完成之后变成闹的，要不要处罚，要处罚。这能理解吧，相当于这两个过程要去怎么去渲染，去渲染啊。能不讲为什么，因为我在over的时候问你，这个方形就是我在往玻璃身上去over的时候，这个方形里面代码有没有被解析，没有，它还是一个异步函数，一定要有异步的概念。你做前端没有异步的概念，你会死的很惨，有没有讲你看所有的GS代码你干嘛，你都看不懂，懂吗？一定要有异步的概念，OK。射线现在能不能搞，应该没啥问题了，OK。