00:00
好嘞,各位,咱们呢接着往下说,截止到目前呢,所有的过渡啊和这个动画啊,都是我亲手写的,其实在view里面你可以很轻松的集成一些第三方成型的样式库或者是动画库来辅助我们快速的实现特别炫酷的效果。你比如说在这儿呢,就给大家推荐一个NPM上啊有这么一个库比较好用,叫做animate.css这是一个成型的动画库,开箱机用,你只要把它一引入,你一应用这个类名,直接动画效果就来了,这是它的主页啊,点击这里,这个网站呢,有的时候打开比较慢,大家耐心的等一下就可以了,在这里面呢,所有的东西都是人家写好的啊,非常非常多啊,各位各种进入的呀,离开的呀,强调的呀等等这些啊,说老师那怎么用呢?来各位回到我们的代码中,我不破坏这个test和这个TEST2啊,我在二的基础上啊,我再给你写一个叫做TEST3啊,然后呢。
01:00
回到APP里面,我再多引入一个人叫做TEST3,这呢TEST3多注册一个TEST3,再使用一下,走TEST3,然后呢,你看着我这样做,我找到TEST3,所有我写的这些什么进入啊,离开呀等等这些全都删掉,但是这个我留着啊各位,这个东西如果没有背景了,就不便于你观察了啊,把它放在这儿,然后上边这个我肯定不能写hello了,因为那样式已经被我删了呀,对吧,各位删掉那写什么呢?来,慢慢来打开它的网站,它会教你怎么用的,往下看,首先第一步啊,就是安装,复制过来,重新开一个终端,点击加号给它安装上,这个库特别小啊,分分钟就能安装完,安装完了之后有一个重要的步骤就是你得引入,很多人觉得安装完了就能用了,同学,你没引入啊,是不是引入,由于我引入的是样式,不是一个GS的模块是样式,所以说各位不用写什么什么什么东西,然后。
02:00
From什么什么东西,这些都不用写了,Import后边直接跟路径直接写那名字anim.css,这是一个库啊各位啊,在哪呢?在这呢,你打开not modus,你找到那个A啊,A开头的,An开头的,然后你再往下滑,应该在这呢吧,嗯,找一下看这呢点CSS,嗯,这是一个第三方的库啊,里边的东西我们不用看,OK,是不是引入了呀,接下来看看怎么用啊,回到网站他会教你的,来重点来了,就是在这儿,这一堆东西都要求你给它带走,那是人家写好的类名,放在哪呢?各位听我说放在name这儿啊,这块必须得配置好,然后东西呢比较长,所以说呢,回车缩进,这块呢回车,然后这块呢也来一个回车缩进啊,Pair呢比较短,我就给它放在上边吧,OK,说老师呢,这就写完了呗,没有,你写到这儿只是代表着你配置成了这个库,但是具体用哪个动画你还没有指定呢啊,所以说各位瞧着在这儿呢,写两个。
03:00
新的配置项之前我们只学过两个,一个是a pair,一个是name,接下来给大家推荐一个新的叫做inter active class,我们之前呢,其实写过这个,各位你打开它是不是我们写过这个hello interactive啊,在这儿换名了,各位不需要你自己写什么了,自己什么也不用写,就是把它换成interactive class就可以了,多了一个class啊,然后呢,你去选吧,你去选一个进入的动画,嗯,那我选选啊,选哪个呢?同学特别多,但是我不建议你呢选这些东西,同学你看这这就太普通了,上下左右对不选点有代表性的,比如说这个啊,或者是这个啊swing这也行,哎,这个效果不错哈,那就这个来,后边有一个复制,然后你把它放在这就可以了,OK,同学,进入的动画已经配置完了,接下来再配置一个什么呢?离开的呗,是不,那再去选一个离开的,离开的呢,同学你找带这词儿的,这是离开的意思啊。
04:00
比如说这个呢,就是向下离开,这不行,太普通了,这是往左,这是往右啊这个呢,诶这还行,诶往上飘走了对吧?哎,那就用它把它复制过来,然后呢,放在这一粘贴,OK,同学写完了啊,自己什么样式也没写,就是配置了这三个东西来,这时候呢,回来你瞧一下效果啊,找到咱们的这个页面里面,同学你看已经有效果了,一上来这上硅谷还摇摇晃晃的过来的,然后你切换的时候,你看好了,各位走走,你看它一直是往上飘的,你这种效果同学总比你自己写要强吧,是吧,各位哎,就能把第三方的库呢,给它集成进来,然后呢,大家注意一下,靠这三个属性啊,Name,还有interactive class,还有live activeive class,当然了,各位,不仅仅只有这么一个库能实现动画或者是这个过渡,还有很多的库自己呢,可以再慢慢发掘一下,好吧,各位,这一小节呢,我们停。
我来说两句