00:00
好嘞,各位,从这一小节开始呢,咱们学习一个简单点的东西,就是view所封装的过渡与动画,我们先看一个效果啊,回到课件当中,我们目前呢,已经进入了第三章的最后一个过渡与动画来走,页面上呢有一个文字,当我点击这个按钮的时候啊,可以切换这个文字的显示或者是隐藏,并且它在切换的时候是有一个动画效果的,你比如说往左一推它就隐藏,往右再一推它就显示,就这么一个效果,咱们来写一写啊,先把它停掉,回到代码当中,那么第一件事儿,我就是把todo list里面所有的组件都删掉,自己重新创建一个,比如说名字呢,叫做test点,然后里边的内容呢也写一下,首先呢,先给它写一下结构啊,上边这呢,有一个按钮叫做显示,然后呢隐藏中间来一杠,然后下边呢是一个H1,内容呢是你好啊,然后同学剩下的东西啊,我就不多说了,咱们之前做过控制一个元素显示还是隐藏,我就直接写了啊各位首先组建的。
01:00
名字你得给叫做test,再其次你得配置一个数据来标识着它到底是显示还是隐藏,一上来那就显示就用A收,然后给这个按钮呢,绑定一个点击事件,然后点击的时候同学我切换这个A字show是不就可以了,取反复回去吗?然后它呢,很自然的条件渲染,并且是频繁切换的,不用V-if,我用V-show对吧?听谁的呢?听这A受的,这不就得了吗?啊,然后再写点样式啊,各位把这个东西给它加上SC,防止产生干扰,然后呢,把h he这个元素给它来一个背景色,看的更明白一点,Orange OK,这个组件就写完了,然后APP里边的东西是不是也得改啊,这一堆全都给它删掉,这个ID呢,我也不要了,引入的时候只引入一个就够了,就是test的这个组件,然后APP里边的什么data啊,什么methods啊,Watch啊,Market等等这些东西全都给它删掉,注册组件的时候只注册一个就够了,这些东西都给它删掉,然后这样式通通的也不要,但是别忘了最后一个环节就是用一下这个组件,对吧。
02:00
啊,OK,现在呢,咱们来看一下效果,回到页面里边刷新啊,你点击它的时候,其实已经能实现切换了,给大家放大一点啊哈,隐藏了啊,显示了,但是你这种切换各位是没有动画效果的,对不对?所以说接下来呢啊,你不用去想,哎呀,老师这个又怎么封装的呀,你先规规矩矩的给人家写出来一个动画再说是吧,各位,而且这里边有套路,各位你不用写两个动画,老师我写一个进入的,我再写一个离开的,没必要那么复杂,各位来观察这个效果,它的套路就是如果你写好了离开时候的动画,那么等它出现的时候,你把这动画给它反过来播放一下是不是就可以了,哎,所以说写一个就行,那我写哪个呢?各位我写它来啊,什么叫来呢?同学,现在是没有东西对不对,从没有东西到有东西就是来呗,诶就是这么一个过程来走着啊,这是消失啊,我写这个过程来,当然了,你也可以写的消失的过程都行,对吧,我就写它来的过程,好写写回到这个T的组件里面那。
03:00
开始写吧,动画你就得定义一个关键帧key frames,然后给你的动画呢起一个名字,比如说我叫at硅谷,然后这里边同学简单写就from和to,对不对?完整点写就写百分比呗,那我在这儿呢,同学我简单写,我就写这个from和to,因为咱们毕竟不是C3的课,我没有必要给你写一个非常复杂的动画,OK,各位好,那一上来同学左右来回动,那你说这是不是2D变换呀,而且是translate X对吧?所以说直接写啊,Translate啊,然后里边写上这个translate X对吧?那同学我写的是他来呀,啊,是他来到你面前,是不是得从远方而来呀,或者说从左边老远的地方过来对不对?哎,那我这么写,同学我写一个负100PX,你要注意啊,你写100PX,那就是从右边而来了,我的意思是从左边而来,当然写负的了,这不墨迹了,各位啊,来走,还有什么呢?就是兔啊,那兔更简单了,把它往过一粘,同学,兔就是来到了呗,那来到之后呢,0PX,这不就得了吗?OK,动画是不是定义好了,那接下来呢,这个动画得用,那怎么?
04:00
呢,你得定义两个样式的类名,你比如说来的这个我叫com可以吧,来嘛啊,那来的时候播放哪个动画呢?播放这个animation啊,先写名字艾硅谷,然后呢,一秒钟,如果你喜欢让它匀速的话,你再加个什么liar什么的,对不对?哎,你不加也行,OK,然后呢,同学,那你说来的我写完了,那你说走的呢,走的我就管他叫这个名叫go对吧,他走了,他离开了啊,那还得播放动画吧,播放哪个动画啊,艾特硅谷还得是持续一秒钟,只不过加上这么一个属性rewards是不是就反转了呀?哎,同学,这C3的东西你得熟啊,要不这块你没法写的,View所封装的过渡和动画不是说让你一点都不写了,你自己还得写点的。OK,各位这些东西都准备好了,那来我们测试一下啊,我呢先给它加上这么一个样式的名叫做com,就是来嘛,啊,看一下效果啊,我刷新走,各位看,诶是不是从左边而来啊,但是有些同学可能说诶老师不对,你这好像没完全走到左边是不。
05:00
啊,很正常,因为我这只写了100PX,你要想把整个元素全都推出去,那你得这么写,确实写100,但是写个百分比,这是不就得了呀,来看一下效果走哎走,这不整个进来吗?这不就是来吗?那去呢,你再换一下不就得了吗?把这改成go,这不就离开了吗?来看一下效果走离开了对不?诶再走离开了对不?各位诶,也就是说同学你不用于右所封装的过渡和动画,自己能不能写,能写啊各位,你就接下来你把这个click点击事件的时候,你写一个那个回调,在回调里面你动态的去给这H11会上com一会儿加上go,那不就得了吗?对吧?哎,但是咱现在说的能不能我们不去自己加啊,你要自己加的话,你就得这么写,各位你得判断一下,哎呀,目前你是go还是come,如果是go那我就给你加上come,如果是come就给你加上go,对不对,来回切换这么一个效果嘛,那能不能不自己写这切换,那靠谁呢?靠view,哎,是可以的,各位来瞧着套路呢,是这样的啊。首先这。
06:00
不说了,你必须得写点这个动画和样式,OK,这三个我都准备好了。接下来是这样的,View的要求啊,是你想让谁发生这个过渡和动画的效果,你就把谁用一个transition标签给它包裹起来,也就是说我现在想让谁有这个过渡的效果,或者说动画的效果让谁让H1,那我就这么写,用一个标签,标签的名字叫做transition。同学,CSS里面有一个属性就叫transition,它什么意思呀,叫过渡是不好,就用这个transition,就把你那H1啊给它包裹起来啊,说老师,然后呢,我跟你讲啊,然后view就能在合适的时候给你加上这个。com或者是go了啊,那当然你不能自已写了,那我刚才起的名字呀,各位是不是come和go啊,哎,View的设计呢,是这样的,不能来的时候你叫走的时候你就go,你得换名字,也就说白了,各位,这个TRANSITION1包裹这H1确实能在合适的时候给你加上特定的这个动画,但是要求就是那名字你不能瞎写,你不能很随意的写一个。com和go,那你知道view是怎么设计那个名字的吗?来,我给你写一下各位的时候view的设计不是com view的设计,说来的时候的动画啊,叫这个名字,V-inter-active什么意思同学我觉得好理解吧,V就代表view,代表什么意思呀?
07:26
进入嘛,就是进入时候的动画,就是我们嘴里的啥来,那active呢,代表激活的呗,那所以说这个意思就是进入的时候要激活的样式,诶你写在这儿这就得了是吧,那同理各位,那你说离开的时候来把这个粘过来,肯定不能叫啊,说老师那也叫go呗,不是它叫这个单词live离开同学我觉得好理解吧,你看进入时激活,离开时激活,你只要把这三个东西啊,给它准备到这两个样式的类名,一个动画都准备好,拿transition在一包裹来,同学你看这效果啊,他就出现了啊,我想让他隐藏走。
08:06
我想让它显示走,同学,我问各位啊,最终是不是我点的时候它真的隐藏了,但是在隐藏之前它是不是播放了一个动画,那我点击这个的时候,最终也确实是显示了,但是在显示之前我问你他是不是播放了一个动画,哎,也就是说各位借助view的开发者工具,你去看的时候吧,你打开现在is show为true,所以它呈现在你面前了,你看啊同学,一个时间点的问题,当我点击这个按钮的时候,一会我拿我这画笔啊,我给你卡一下啊,这个画笔来调一下,我给你卡一下,你看着啊,同学,我开始点来走卡住,同学你看这已经变成啥了,已经变成false了,但是同学他在这干嘛呢?是不播放动画呢?哎,就有这么一种感觉,比如说哎呀,兄弟,你想隐藏啊,行,这事儿我给你办了,肯定隐藏,但是在隐藏之前咋的,我得播放个动画,人家程序员写好的吗?啊叫离场动画,或者叫退出动画,或者叫离开动画都行,OK啊,那同理,同学显示的时候你看着我点的时候走,其实这已经变成车了是不就是。
09:06
他才告诉你最终我一定要显示,那显示之前呢,多放个动画,这不就得了吗?是吧,各位诶,你看看,这总比你自己要写那个逻辑要好一点,是不是你的关注点就是控制这个东西就可以了,蠢贼神一包裹就得了啊,两个类名一个动画,你准备好就完活,如果你觉得说老师这东西不好看,你再调整一下时间,什么0.5秒,比如说在这儿再来一个林点是匀速的对不对,这些,但是最好吧,让这个离场和进场吧,让他俩都差不多这个时间是吧,都是一致的0.5,然后这是反转,那你看一下效果呗,来走。再来是不好了,这就不展示了啊各位,然后呢,这里边呢,还有一些小细节的问题,就是说呀,每一个过渡啊,其实还能取名字,你比如说我写一个内幕,内幕呢叫做hello,起名字了吧,来,你看着各位,如果你还像之前那么写,嗯,你的动画丢失了,为什么丢失了呢?哎,是这样的,各位,如果你给这个transition起名字了,那么你这块就不能用默认的V了,就得用hello,哎同学,说白了就这名啊都是有规则的,你这如果起的名是hello,那这就得是hello activeive,那离开就得是hello live activeive,如果你不写名,那默认就是用view的首字母什么呢?V,这不就可以了吗?来,回头再看一下啊,走走,如果说你这没改VV同学你放心,他不会报错的,就我们正常同学们,咱们去写那个CSS,你写错了,他也不会报错是不?各位顶多是不生效,你这么写的后果就是,嗯,丢失了任何的动画效果,因为什么呢,人家这边去。
10:38
Hello,杠,Active,结果你这没有是不?各位好了,撤回来这里边呢,还有一个细节上的问题,各位你发没发现啊,就是我一上来的时候它是没有动画的,你看我刷新一波啊,走一上来就直接出现在这儿,完了你得点它才有动画,那能不能让他一上来出现的时候就是这个效果呢?哪个效果这个诶。哎,从远方而来,能不能这么去实现一下呢?可以各位加这么一个属性就得了,叫做a pair同学,这单词什么意思呢?本身就有出现啊,显示的意思对不对派你把它的值呢,调成布尔值真就可以了,但我想问各位的是,你说我就这么写,我的意思是把apart的值设置为帧吗?不是,你这么写的意思是transition这个标签里边有一个a pair属性,A pair属性的值是一个字符串t rue,你这样写各位控制台它就报错喽,你看说的多明白,我期待的是一个不尔值,但是我却得到了一个串啊,什么呢,一个字符串的t rue,可能有些同学说,老师那你功能实现了呀,一刷新你看它有这效果呀,但这警告你不管了呀。哎,各位标准的写法得是这儿写一冒号对吧,Pair这样的意思,它就代表表达式了,就是不尔值了对不?刷新一波这回就没错误了,但是这儿呢,你没有必要写的这么麻烦,各位你可以直接这么写这个冒号啊。
11:58
删掉这个等于呢,也删掉,直接写啥意思呀,就是让这个transition标签有一个a pair属性就得了啊就比如说各位我想让这八呢拥有一个X属性,你可以这么写X就得了,各位你看一下效果刷新一波右键检查,你看他身上有没有X,肯定是有的呀,对吧,各位说老师,那我想不让他有这X,那你就这么写冒号X等于,然后这呢写一波值false,那你最后看效果刷新一波右键检查各位那就没X呗啊但是你要让他有X,没有必要这么写的,这么麻烦冒号处对吧,直接写X就可以了,所以说这会同学同理直接写a pair就可以了,OK啊,回到这边刷新一波啊,你看一上来就有效果,而且走出去走回来,你看同学你仔细看这啊,我点的时候走,你看不看这些东西,其实view呢,在合适的时候他去帮你加了啊,OK,你看咱们写的这个不出现在这了吗?看hello live active同学是不是离开呢啊,给没给你加离开的样式加没加加了哎。
12:58
老师还加别的了呢,你看hello live to还加这个了呢,一会儿再说啊,咱们先讲这个,就是active这个那个to,一会咱再聊,OK,值得你注意的还有一个点,各位,就是这个transition呢,最终没有形成一个真正的元素,就是这对绿色的transition,最终view在解析的时候把它们给脱掉了啊,怎么能证明呢?你看这显示的时候,右键你找到那H1同学,我问你一外侧有东西包裹吗?用transition那个标签吗?没有是吧?各位,哎,浏览器是不认识transition这个标签的,这个东西呢,是给view用的,OK,这不就可以了吗?所以说同学套路就是你准备好这些东西,并且名字你按照规矩来,那么view就能保证这个元素发生变化的时候给你加上这个动画的效果,还有就是各位,这个动画的名字其实你可以随便起,我叫q we,你这儿只要跟它对上就行了,OK view不跟动画进行对话,他跟什么呢?跟样式的类名进行对话,OK,好了,给他撤回来,那这一小节呢,我们先提各位没有总结,因为东西没。
13:58
讲完呢,这只是热热身,OK这小节。
我来说两句