00:00
好嘞,各位,咱们呢接着往下聊,首先解答一个大家可能会产生的疑惑啊,就是在这儿有些同学呢,可能觉得,哎呀老师啊,这个内幕呀,设计的好无聊啊,就不应该有这东西删掉完了我写代码呢,也简单了,我这写V,我这写V,老师这不就搞定了吗?但你考虑一个问题啊,如果你的结构当中还有一个元素也要有动画效果,那怎么办?你可能觉得很简单,说老师,那就这段我复制过来啊,说老师来,你告诉我哪个元素是HR吗?那我就写啊,内容呢,上硅谷那我就写,OK,老师,我实现了呀,啊,这两个东西都有动画效果啊,但你可要知道啊,这个transition和这个transition他们都去找这个类名啊,V杠,Inter杠,Active,那同样的离开的时候,他们也都去找v live active5,也就意味着J h1和J h2,它进入的动画,离开的动画是不是都是一样的呀?那如果我的要求是。
01:00
让H2进入的动画和离开的动画都跟H1不同,你是不是就写不下去了,但是如果有内幕你就能写下去,比如说我写一个内幕,这写一个H2,那同学你放心吧,这个transition他就去找H2,杠杠IK5,同理,那个例五他也会去找的,这不就区分开了吗?对吧?各位,哎,所以说人家的内幕呀,还是有作用的,如果说你变化的元素只有一个,你确实可以不用写内幕,但是我在这儿呢会写上,因为我想用一个例子呢,跟大家体现出来,它可以配置这个内幕属性,OK,那在这呢,V变成,那这呢也变成hello,保存看一下效果,OK,能隐藏,能显示,接下来你注意了,各位,我要实现同样的这套效果,但是我不拿动画写了,用什么呢?用过度去写,也就是说刚才呀,我实现这个效果是因为我自己写的这个动画,对吧,然后再匹配上这些东西,那接下来呢,换了不写这动画了。
02:00
用过度好把它呢复制一下,改个名字啊,叫做TEST2,那引入的时候就得多引入一个二,注册的时候呢,也得多注册一个TEST2,同样的他得用一下,对不好了,回头看效果,他俩现在必定是一样的,因为代码都是一模一样的嘛,走隐藏走隐藏来显示来显示,接下来同学别的都关掉,只留下TEST2,我不想用那个动画去写了,先把这块折叠起来,那怎么办呀,这会儿就删了去吧。那这个animation呢,不能写了,那这个呢。也不能写了,说老师那这两个东西留不留着呢,我跟大家讲,留也行,不留也行,然后各位你听好了,我告诉大家啊,就是一个元素从没有在你的视线里面,然后出现在你的视线里面,也就是说我们所谓的那个来的过程,View不仅仅给你加了这个东西,Hello interactive,还给你加了两个别的。
03:05
啊,那当然离开也是,咱先不说这离开就说这来刚才大家可能觉得,哎呀,一个元素奔我而来,View呢,就加上了一个类名,就是hello interactive,不是它一共加了三个,还有两个,那两个叫什么名呢?来各位我先把这删掉,我给你写写那两个叫什么名儿,第一个呢,叫这hello-inter啊,还有一个叫做hello-inter-two啊,先不考虑那个hello-inter-I,因为刚才那个大家已经看到了,配合动画能完成效果对不对?哎,说老师,那这两个来吧,给大家写写注释啊,你就明白了,这个hello-inter叫做进入的起点,然后再看这个hello-inter-two,各位,这叫做进入的终点,诶,我就这么说,大家能不能有所感觉呢?说老师,起点和终点这是什么意思?
04:05
呢,来同学给你画个图来说红色的是你的浏览器,然后一个元素啊,想奔你而来,我问各位是不是得从远方而来呀,也就是说那H1啊,刚开始在这儿呢,然后奔你而来,最终他是不是出现到这儿了?那我问各位,你说哪儿算是进入的起点,哪儿是不是橙色这个区域,那你就把橙色这个区域里的样式写在起点里面就完活,然后同理各位,那你说这个终点的样式你是不是写在这儿就可以了呀?那大家想想吧,那你说进入的起点是怎么一个样式元素离我老远老远了,那就得写一个,然后里边呢,来一个X,老远老远就是我们的负的100%,那终点呢?呃,终点其实就是真正展示到你面前了,正常显示这个东西,那同理,各位把这东西一复制,就是没有任何的位移,那不就得了吗?写个零是这意思不啊?
05:05
啊,说我是这么写也行,当然行啊,你看我没有写动画吗?我就告诉你刚开始你是什么样的,我再告诉你最终你是什么样的,剩下我不管了,你自己变去吧,是吧,来看效果啊刷新诶然后你就会发现啊,诶老师你看你这改坏了,来的时候他也没有来的那个动画啊,上面那有这也没有啊各位你少了一个东西,少哪儿了呢?大家猜猜能不能猜得到,你看我刚才用动画实现的时候,各位持续的时间是否匀速,这些东西是不是都是靠这个动画的属性去指定的呀?那你在这儿不觉得丢点东西吗?啊,你告诉人家你从这儿开始进入啊,最终呢,你进入到这么一个位置,那我耗时多久啊,是不?我是匀速的呀,还是加速的呀,你没有配置吗?啊,那怎么配置啊,各位想想,谁变就给谁配置,你说对不对,谁在变H1,那我在这就写一个啥transition,这不就得了吗?然后写一个比如说0.5。
06:05
秒也让它是匀速,这不就可以了吗?来看效果啊各位,回到这儿刷新一波,你看来了吧,再刷新一波来了吧,但是人家这走是有效果的,你这走可有意思了一点,等0.5秒它才消失,为什么?因为你的过渡给的0.5秒嘛,人家整个这个过程肯定是0.5,但是你没有给离开的起点和离开的终点,你说对不?各位,所以说这套东西还得再复制一下,把这改一下,不叫进入,那叫离开,那这不叫inter,叫做live啊,那再往下看,同学,这呢就叫做离开的终点,那既然是离开,这就是例,但是还有一个地方啊,你得改各位离开的起点,想明白到底哪儿是离开的起点。同学,这个东西想离开,那就证明它已经正常展示了,你说对吧?正常展示是绿色的位置,那你说离开呢,是不是橙色这个位置?我就问你,哪是离开的起点绿色的,哪是离开的终点橙色的?来把离开起点的样式写在这儿,离开的起点没有位移,所以是零,离开的终点离我们很远,那就是负的100%,对吗?各位,OK,你这么一写,整体效果都来了啊,离开。
07:31
离开。来来,我问大家和那个用动画去写是不是一模一样啊,说老师那你放心吧,我肯定不用这种方式去写,这些方式太麻烦了呀,其实你可以优化呀,各位你发没发现进入的起点其实就是离开的终点,进入的终点其实就是离开的起点,这不是一个轮回吗?所以说各位来吧,把离开的终点给他带走,给他写到这个位置啊,来这会儿写一个逗号,写在这个位置,然后呢,再把这个文字给它拿回来,进入的起点和离开的终点是一个效果,那这块呢,就可以不要了,再把这一堆给它剪切走,放在哪儿呢?放在这儿再走,那这个也叫做离开的起点,进入的终点,离开的了起点,那这会儿呢,就给它删掉了,这样的话这不就行了吗?来看一下效果,刷新一波走。
08:30
来再走,再来是吧,各位,哎,跟那个呢一模一样,而且在这儿呢,你还可以借助另外一个东西啊,去优化一丢丢,就是刚才同学你为什么在24行这块加了个0.5,零点是为了完成整个过渡效果,是不?你可以这样做,同学不把这个过渡啊加在这儿,其实你加在这儿同学能不能实现效果也行啊,一点问题都没有,但是如果你想做的更好一点,那你的最终效果就是不破坏人家原来写的任何一个样式,人家原来比方说H1里边,之前编码人员就写了一个background color是orange,那你可以不用动这。
09:10
说老师那不动症,那就没有过渡效果了吗?你可以这样去做,来各位借助刚才我们学过的那两个东西,Hello杠,Inter杠,Active,这什么意思呀?来的整个过程激活的样式,那再写呗,第2HELLO live active在这里边把它加上就可以了啊来同学给大家捋顺一波啊,一个元素奔我们而来的时候,View其实一共啊,给我们加了三个样式的类名,分别是进入的起点,还有整个进入各过程中,还有就是进入的终点,然后同理一个元素离我们而去的时候,View也会给我们加上三个样式的类名,分别是离开的起点,以及整个离开的过程中,以及离开的终点,对吧?如果说你想用动画去实现效果,同学这两个红色框里的东西。
10:10
其实你没有必要写,你只要把中间粉色框的这两个给它利用上是不是就可以了,那你看刚才我们是不是这么写的,同学看interactive live activeive对不对?但如果说你想借助过渡去实现,那就得稍微写的多一点,各位这是进入的什么起点,什么离开的终点,这些是不?如果说老师我想精简点,我不写这些东西我给他拿走啊,我拿走这些东西我不写,就谁变化我就给谁加过度呗,这么写当然行啊,刚才咱们已经看见了,是不来撤回来,咱看看这么写行不行啊,刷新一波,各位让他走,让他来,让他再走再来可以吧,各位,哎,所以说你看这就是借助过渡去实现,稍微复杂那么一点点啊,然后呢,同学咱可以观察一下啊,你就比如说拿这个H1啊,咱给他举例子,你看着当我点击离开的时候,各位注意观察它里边的内联样式,一会儿呢,我拿我这个画笔啊,给你卡一下啊,看效果啊。
11:10
让他离开321走,各位看这加没加上hello live active加上了,加没加上hello live to加没加上,加上了,因为他是离开,所以说人家加了这个,加了这个,我知道有些同学可能问,哎呀,老师啊,有一个东西我咋没看见呢?就是hello gone leave啊,离开的起点我咋没看见呢?这儿呢,跟大家说一下,这会儿呢,它的速度极快,这个离开的起点只是说它瞬间加上了,让人家知道啊,他从这儿开始离开,然后在下一帧的时候,你那个动画和过渡不得走嘛,一帧一帧走吗?在下一帧的时候,它瞬间就把这个离开的起点就给移除了,就什么意思呢?我知道我从哪离开就得了,剩下我整个离开过程中,那在这儿呢,我离开的目标那在这呢就得了。所以说同学无论来还是去,你就通过这个控制台去观察,你根本观察不出来两个人,一个是hello enter。
12:10
一个是hello live,这两个你都观察不出来,因为是瞬间就没了,你比如说各位啊,你看着现在是不是隐藏呢?我想让他来啊,我再给你拿那个画笔卡一下,走,同学看这有没有interactive,有,有没有to,你能看到吗?看不到加上去瞬间就没了,OK啊,这就是用过渡啊去实现啊,当然有人也不喜欢这么写,把这注掉,把这东西放在这儿也行,那我在这儿呢,就放在这里了,OK,哎,这一小节呢,我们先停,各位体会一下,用过渡去写。
我来说两句