29.尚硅谷_css3_过渡运动形式&过渡延迟.wmv原创

好看一下，刚刚我们已经讲到了。过渡了吧，是不是过渡第一第二属性已经讲完了，好看过渡第三个属性，好来看一下这里。零二过度。好，那过渡在这边去讲的时候，我们来看一下啊，然后把这个DEMO我们改一改啊，现在这个DEMO长成什么样。啊，就是一个圆是不是OK，这样我们把这个还全部改过吧。呃，或者说只改外跟吧，暂时ID和OK一个一秒一个两秒吧，这来看一下。好是不是好，没有问题，好嗯，总感觉这个圆这个效果不是很好，不要圆了，反正没有修改过。好，这样应该比较明显了，是不是好再来看，嗯，好，现在我们来讲一个什么呢？来看这个运动的过程啊，把这个黑色也干掉好这里。

好大，看现在这个运动的过程是不是。匀速其实不是匀速的，怎么看呢？不是匀速搞两个属性，你们不好看，搞就搞一个属性。好让它时间稍微长一点，十秒，整体看这个时间十秒，把它这个宽度现在原来是280，把它变成变成十，高度为不变。走，你。是匀速吗？呃，再看看来我再说一下，上来看。看啊，其实它是有一个默认值的，我们来看看啊，就先把这个默认值告诉你们啊，加速然后减速，看是不是这样的啊，好整理来看是不是先慢慢加速。

建筑是这的，还没看懂，是不是还没看到这样，嗯。太难了，不难，Y是变成300P吧，这么看看是不是先加速再减速的。周年。加速了吧。慢下来了吧，是不是先加速再减速的，只不过这个过程啊，没有那么强烈是不是，反正肯定是先加速再减速的默认值是不是啊，OK，那这个值是谁来控制呢？有个这个全三星TIM方形啊，OK，那它有多少值呢？啊，那CSS属性受到全身的影响啊，会不断的产生这些什么中间值啊，这个属性就是用来描述这些中间值是怎么计算的，也就是它是用来控制这个过程的。默认是什么一人啊，我们来看一下啊，这上面这个就是官方的一些介绍，自己看看就行了，知不知道好把这几个属性我们来看看，好我们来看真正的匀数长什么样啊，OK，那这边来个什么全三角形，什么它方形匀数叫做领导线性吗？是吧？走你看看。

刷下这个是个你看是不输的是不输的，这个绝对是你输的吧，是不是OK，再来看还有什么。Easy in加速。啊，OK，我拼吧，应该能拼出来，我不用拼1Z1加速，只要你。是不是加速的。越来越快吧，是不是越来越快，越来越快了，明显是加速了吧，好，这点再来看这个时间是不是搞得太长了，隔五秒吧，来看一下你们能不能看出来。加肯定是加速的越来越快了，是不是OK？所以你再来看还有什么，有easy就有easy奥，什么减速，那它是减速的，以out减速的只有你。

刷下，先快后马。没毛病是不是OK，引力减好一点是不是好，所以你来看再走EZ1号塔，这个也是先加速后减速吧，跟我们这个一是不是一样的，来看看1OUT走年。先加作。再减速是不是啊，可是这个过程明显比一类来的强烈。是不是你说他先加速后减速，这个幅度要比你来的强烈，他们俩还是有区别的，懂不懂，OK，还有什么，哎，前面这几个好不好理解，比较好理解吧，哎，那比较难的一个来讲，就贝塞尔曲线啊，不知道你们上大学的时候有没有学过贝塞尔啊，听过是不是啊，听都没听过啊，那你上过大学没有，大家看看，OK，看一下这个。

课程为一个参考站点，你看这边有一个贝2.com，是不是就叫贝点com来看一下。好，贝斯曲线，你要理解它很简单，可是不要深究它啊，你说被贝曲线怎么推出来，让我帮你推一下，你道了吧，啊，来看下。好，我来告诉大家。这条线代表时间，这条线如果是宽度的话啊，如果你过度属性是宽度的话，代表这个宽度的值啊，如果代表是位置的话，那这个这两天就代表位置。这怎么讲，就是这条线代表你那个变化的属性的值，懂吗？OK，来看一下，现在我们看这个过程是一个什么过程，好先应该是什么这个时间，反正在我这一段时间之内。

这段时间之内，这段时间之内是一个什么加速的过程，是不是为什么是一个加速的过程，因为你不是一条直线。你你是一条曲线是不是，而且这个加速的过程，这个速度应该是越来越。快还是慢？越来越慢了嘛，这个速度是不是你看它的，你看它什么，这个叫什么斜率吧，是不是斜率是不是越来越平缓了，那这个速度肯定是会干嘛慢下来的嘛，是不是，可是你看到到这边是不是有一个退回来的过程，说明一开始宽度在一定时间之内会达到一个值，然后这个宽度会慢慢的缩回。是不是就时间越长，这个宽度是会慢慢做嘛，缩过来的，最终是不是到你这个最终指定这个什么宽度的位置。真的没理讲好，我们来看这个过程啊，怎么看呢，这边是不是有个位置好把这个被干嘛，你看上面是不是1.67.76啊负五啊啊这个字不准啊啊不不这个字不准，你看这两个字不一样的啊，你要用这个字懂吗。

这个值就是代表着你这条曲线的。懂吗？OK，然后你要把这个BC嘛。先把这个贝塔复制过来嘛，可是这个里面的数据是不对的。啊，这个他们方形本身是可以是一个内在尔的函数来看一下好把再把这个值根嘛。拿过来。走，你看一下。刷一下，看是一个什么样的过程。是不，前面很快，你看有没有说回来这干嘛加速吧，是不是，你看都是一个，反正都是一个什么加速的过程，首先看是不是一个两两次都是加速的过程，OK来看一下。啊，我来说下周你加速回来，回来先不管在出去时候是不是也，他也是个加速过程，就两次出去的时候都是加速过程，回来那一次是不是有点像匀速。

是不是回来的时候是不是有点像语数的，来看一下整你。回来时候是不是有点像语速啊，两次出去是不是都是加速不对，第一次应该是加速还减速，第一次是加出来是结束。怎么看加速跟减速啊，看斜率啊，第一次加速减速啊。第一次是减速嘛，减速嘛，随着时间的推移，这个斜率越来越平缓了嘛，所以第一次是减速，可是这个宽度是不是慢慢变大了，是不是，然后有个过程，这个过程相当于是一个线性的匀速的过程，宽度是不是变小了，然后又最终干嘛，斜率是不是又慢慢变大了，最终是一个加速的过程嘛，是加速还是减速，看斜率吧啊，刚刚是不是已经刚是不是我们刚刚说是不是第一次也是加速啊，第一第一次应该是什么减速来看。

是不减，然后是个什么匀速，然后是加速。你看第一次上来斜率慢慢变缓了。减速还是加速啊，这条线是减速还是加速啊。想告诉。刚开始速度是很快的，因为你这个斜率。很懂吗？你看这个学历是不是一直在变平缓的。那是加速还是减速啊，减速啊，只不过一开始速度很快吗？那这个哇，这个那你看那我干嘛。周年。嗯，怎么办，这样这样是个什么过程，这是个减速的过程，然后呢，我问你会不会我一开始指定这个点到哪边的，我300会不会这个宽度超过三。

会啊，你看我这边是到300吗？超出了肯定会超过300的吧，最终呢，再回到300回来这个过程是个什么过程，加速的过程，出去是一个减速的过程是吧，来看一下。那是不是把这个比出来干嘛提过来只有你CTRLC。Contra。CTRL来这里出去是个什么过程，看看这个线减速的过程。是不是回来是个什么过程，加速是不是只不过加的什么时间有点短吗。这个能不能理解啊，这个被上曲线，你就这么去理解它，你不要搞这个被上圈怎么推出来的，不需要你计算。那么讲OK，你也可以在这边去看来看一下，比如说干嘛，我在这边再去搞一个，搞一个我都没有办法干嘛。

周你啊，反正我也不知道这是什么鬼，是不是瞎搞吗？是不是OK，你在这边干嘛，Go？自由展示吧，是不是上面这个是什么，是你这幅图的这个什么easy嘛，默认值的嘛，对吧，你看比如把它换成什么线性的go。时间是不是都是同时到达的，懂不懂，只不过这个过程是不是就不一样了，这能不能理解啊？这个被测其实也蛮好理解的，只需要你搞清楚这一条线代表时间，这一条线代表你这个变化的属性的值，懂不懂，斜率代表。速度。能理解吗？OK，这里这是贝，好，那当然它还有，它还有一些纸，来看它还有什么纸，Step star and，为什么steps吧，这代表步数，我们来看看star代表什么。

Johnny。看一下。一步过去吧。是不是？一步过去嘛，再来看还有什么。刷一下。123451步过去。数快了，他还是你不过去了吧，只不过我们说你这五秒啊，你是一个五秒的过程，实际不是代表你的五秒的一开始十不N代表你五秒结束的时候，这这个能不能理解啊，OK，好，那再来看还有什么。是不是还有步数，来看一下这个步数代表什么意思啊？走你，我们拟给你分成五步，是不是来看？

我的天啊，他跳了，看见没有？停是不是，而且你看上来是不是干嘛，我浮上去就跳是吗？来我说一下浮上去就跳，等着一秒再跳了，哎，看一下我如果后面跟个S。上来就跳，你看刷下上来就跳。上面就调是不是，你看我刷一下，现在我不动了，浮上学立马就调，什么意思啊，这个里面是不是可以跟两个参数的，第一个你分几步，后面其实还可以跟个值，要么是到，要么是N，是不是默认值是啊N的这这个代表什么意思啊，你现在是不是五，总共五秒分成五啊，那是不是有一秒一秒一秒一秒一秒大代表什么意思啊。是不是你每隔一秒要跳一次啊，什么时候跳四，到时候就干嘛上来就跳摁的呢？等一秒结结束时段都是在什么。

结束跳，如果就是迟到的话，都是在什么一开始时候跳的。这能理解吗？好，也就是说这个过程的定义的，我们说是不是可以通过我们开发者自己来定义了。那么讲，而且它也给我们提供了很丰富的一个结合吧，特别是这个悲伤极其的动态，是不是你想让这个运动过程变成什么样，就去那个站点上面干嘛调嘛懂不懂，调到你想的这个什么运动过程就可以了，懂不懂，OK，这是我们讲的什么全三形方形啊，OK，好好，那我问你现在它是不是也可以写成列表的，当它写成列表的时候怎么办呢？啊，你可以规定多个他平方和写啊，通过使用全三角形或离属性，可以根据主列表干嘛，这个什么意思啊，这读起来特别拗口啊，就说你可以写多个他们他们方行吗？然后你上面这个列表是不是也可以写多个的，是不是，你看他是怎么去。

重复打。你看，如果台面方形的个数比主列表的数量要少怎么办？缺少的值设置为。初始值跟我这个。跟我这个一样吗？不一样，他是用什么默认值啊，这个呢，重复列表的。不一样的形式懂不懂，OK，那再来讲最后一个数题是什么，选三星别对是干嘛的，延迟吗？是不是只你现在我说让你延迟个三秒，什么意思啊，那这个我也就先来个线性的是不是啊，我说你这个外形的话去产生变化吧，可是我让你延迟三秒去做，你看看着啊，好，我要恢复上去了，等1236动。哎，就不动了。啊，延迟了三秒吧，OK，那也一样，这里面是不是也可以写成列表达，是不是OK，那它是怎么办呢。

时长列表会重复，所以跟时间有关的都是去重复这个列表的。这个呢，使用默认值全三性，一共就这四个属性。能不能记住OK，而且它这个列表的重复问题啊，考虑考虑清楚，这里面还有一个坑，它有什么坑。零必须给我带单位，不带单位也是Y啊。就是出问题了，懂不懂？OK，好好，那讲到这一块，我们是不是把全三体的所有的属性全部讲完了，能不理解？OK，那看一下这边我给大家整理了一个什么，当属性直接列表长度不一样时候怎么办？是不是只要是跟秒数有关的干嘛？关于时间的会重复啊列表全三星他们三个性时都使用的是默认值啊，这个给我记记做懂不懂，就人家在问你这种API的时候，你不能告诉他，哎，全三角型它有全三型，不是点全三型有韧性全三型产品function性，全三性delay啊，这个是指定那个属性列表的啊，这个是指定周期的，这个是定运动过程的，这个是指定延迟的，你这么说谁都会说有没讲，就你们去面试的时候千万不能这么说，你应该说它里边的。

坑懂不懂，那我在使用过程当中，我踩过什么样的坑啊，当然刚刚刚刚那些就上来这些介绍的，大家都要讲啊，你讲你也讲，别人也讲，真的，可是你要比别人多一点东西啊，你说哎，我在使用的时候，哎，他有哪些坑啊，比如是在应该讲全身体圆形的时候，我说哎，这个零必须是要带单位的，不带单位干嘛，可能会让这个什么，整个过渡机制会失效的，什么时候会失效，当你是一个列表的时候，如果你当中有零是不是，可是你没有加单位，它就会失效，如我在开发当中会遇到这种问题懂不懂，因为我们现在讲了这些问题了，我在写项目的时候，我就会规避到这些问题。能不讲，所以你们在项目当中会体会不到这种问题的，能不讲，可你知道你在表达的时候一定要跟人家讲清楚，等等你不要上课的时候，这个技术学的特别好啊，最终去面试的时候什么都不会说，工资是要不上去的啊，八月份刚有个班毕业啊，一个小女孩出去面试。

跑到人家办公室门口了，不敢进去了，又回来了啊，面试辛辛苦苦坐地铁，坐了两个小时，坐过去，发现推门的那一刹那紧张了，回来了。回来立马哭了，这是为什么？这是你平时这个准备没有做，身份心里没准备，懂不懂，在你要去面试的时候，你就特别特别的虚啊，一般刚刚毕业的同学都会这样啊，我一开始毕业的时候也是这样，我是这么解决的，你不是会发抖吗？脸色不是要雪白雪白的吗？你怎么办？我就去厕所往前跳，拼命的跳，把自己跳的非常的热，那这个时候你再推门，再往里一坐，因为全身都是汗嘛，你就不会抖，然后你第一天，前一天晚上你准备的所有的东西你也全部记得啊，你要是不去把自己身体搞得特别热，你门一推开来，你往那一坐，前面坐了三个面试官，你刚屁股坐下来，你看你看就已经开始发抖了，前一天晚上准备的所有的记录点轰的一下全没了。

啊，所以说一定要先每天就是问自己来这个东西，我在面试的时要怎么讲啊，我们每天讲好多技术点，你要整理下来，这个东西面试的时候应该怎么讲，怎么讲怎么表达会好一点啊，一定要去给自己去加这种戏。可以理解吗？啊，不要到最后的时候再来准备发现啊，什么技术点都忘了，因为你之前没有做准备啊，懂吗？OK。