温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
好嘞,各位在这一小节呢,我们来探讨一下,如果有多个元素需要有同样的过渡效果,我得怎么写?回到代码中,也就是说这个H1的下边啊,还有一个H1啊,内容呢,我给它改一下,比如说呢,叫做上硅谷,好,我的要求是这两个H1拥有着同样的过渡效果,我得怎么写?可能有一些同学说,老师你这不就写完了吗?你看这个喘贼身里面包裹着两个H1,那你的意思不就是他俩有同样的过渡效果吗?理论上吧,好像确实是这么回事儿,但是等你试的时候啊,你就发现它不对了,各位只有第一个能出来,第二个是不是没出来,并且控制台上是不是有一个警告,各位来读一下,他说什么呢?说transition这个标签仅仅可以被使用在一个单独的元素上,如果你有多个,请你使用transition group,而且他说的还挺明白,他说list什么意思呢?就是如果你的东西是一个列表。
01:00
L里边有多个元素的,你想想那个u Li那个结构对吧,你就得使用谁呢transition,好,我们改一下,各位知道怎么改了,把它改成transition group是不是就可以了?简单记就是transition只能使用一个元素,Transition group里边可以使用多个元素,好,这回呢,我们再试一下,刷新一波,哎哟,同学,这回问题更严重了啊,两个东西没有任何一个出来的,并且你看控制台上的报错各位,他说transition group里边的每一个元素都应该有一个唯一的key值,所以说你必须得给他写上,也就是这里还有这里都得匹配一个key值,这就是人家的要求了啊各位,而且我们也知道,如果这个绿色框里的是一个真实的列表,我们是不得借助V-for去生成,我在给大家讲这个列表的时候,也跟大家强调过,关于这个key值是不是在这儿呢,咱就不墨迹了,好了,保存一波,回到这儿刷新。
02:00
同学,你瞧效果这回就一致了啊,他俩会一起隐藏,会一起显示,对不,同样的效果我写到这儿呢,可能有些同学啊就会说,老师啊,不像你这么麻烦,我都不知道这个transition group,我也能把代码写下去,老师你看着我这么玩,我就把这两个H1啊,我给它剪切走,放在一个div里面,然后呢,每一个H1都不需要去写,什么K值啊,V杠受啊都不写,我就把那个条件渲染呀,加在最外侧的元素上,我就直接来一个V-show,然后呢,就听这个a show的指挥就得了。老师,你看效果吧,刷新一波,你看他俩一起显示,你看他俩一起隐藏,老师我实现了啊,这么写的同学没毛病,可以,但是有些时候你听我说,你没有办法把这两个H1啊包在同一个div里。哎,可能我这么说呀,有些同学就不服了,说老师不可能是吧,他俩同生共死吗?你显示我也显示,你隐藏我也隐藏,那当然可以包在一个div里了,来,同学我说这么一个场景,你好啊,这个H1和上硅谷这H1它俩是互斥的,啥叫互斥?就是第六行展示,第七行就不能展示,第七行展示,第六行就不能展示,那同学你说他俩互斥的是不就不能放在一个div里了?哎,那你就只能这么写了,来,把东西再给它重新,诶,撤回来走,就是这两个H1啊,还得这么写着,这个喘贼神呢,还得在这加着。同学,你在这取个反是不就得了,哎,这不就互斥了吗?你展示我不展示是吧?我展示你也不能展示,好,这回呢,你看一下效果刷新,各位一上来是上硅谷点一下切换,你好啊,再切换,你看同学有这么一个效果,就是这个来这个去,或者是这个去,这个来,它俩是一个交叉的过渡。
03:54
你看一下效果走走,对吧,那这种场景你说能把他俩包在一个div里吗?肯定是不行的,对吧?各位OK,这就是transition group,就是多个元素的过渡,怎么写,那这一小节呢,我们停。
我来说两句