尚硅谷前端基础 (105)

好，那么我们再来看一下刚才我们写的这个啊，那等于其实这个二维码的这个下拉效果的话，我们基本上就已经给它，呃完成了啊完成了，呃，刚才我们改了一下，后边我写的时候其实出了点小问题，就是嗯，开始我的设计是什么呢？就是呃，是这样的啊，我们开始的我的设计。Qr code1上来的话，我是一个底斯林档，这是没问题的对吧档，然后呢，我的设计开始是这个APP变成这个ho的时候，我让它显示出来对吧，显示出来我们回复一下刚才那状态啊，我把这先注掉，把这先注掉啊，把这个呢也先注掉，CTRLC这两个代码我们注掉啊，然后我们重新哎呀呀呀呀。呃。这边没法住，那我把它这个选择器注掉了，开始什么样的，开始这样啊，就是点一个APP冒号冒号一个after啊冒号冒号一个after，那这个时候我们来看一下啊，哎呀，这个编辑器，这个编辑器其实你会发现用到一些呃麻烦的东西的时候，还是有时候不太好用啊，我们来看一下，这个是我们之前的一个状态对吧，小三角我们现在显示了那个东西我们隐藏了对吧，当我鼠标移动以后，现在还不出来呢啊，然后我们这个小三角呢，按理来说也应该隐藏起来，所以我们开始设置是一个display，我们来一个这个block，哎，Display纳哎伦纳，也就说我要把这个小三角也进行了一个隐藏，我希望是什么呢？我希望的是鼠标移入的时候，是不是不是让这两个东西显示出来呀，哎，所以我开始用的是一个什么呢？哎，我用的是一个ho，我用的是一个叫做APP，我在这写吧，点一个我们叫做一个APP冒号一个whole APP冒号一个whole，我让谁显示出来，哎，我先让的是我。

我们这个点一个QR扣的显示推，诶我们直接来一个display block，哎display block它就直接就干嘛了，哎直接就显示了对吧？然后呢，哎，你应该还记得我是写这么一个东西啊，点一个APP，点一个APP，诶冒号一个ho啊，然后下边一个点一个APP冒号，冒号一个after，我写这么一个东西，写完了以后发现它没用对吧，没用，那这写法肯定是不对的，因为看上去就很奇怪，对吧，等于找APP是是是很乱啊，很乱，所以这个时候它的正确下法应该什么呢？应该就是APP冒号ho，然后冒号冒号after，也就说当我ho到这个APP以后，我再选择的伪元素啊，应该是这样的，这样就没问题对吧，这样就没问题啊，所以这个时候写法的话，你就呃注意一下就行了啊，这两种写法，我们上边这种写法也行啊，上面法我是加了一个这个，加了一个这个LY，加了一个这个这这这这这这类名啊类名两种写法呢，你都可以去，呃，都可以尝试一下，这东西也不耽误什么事啊，不耽误什么。

然后再看的话，我们这个下载APP啊，它原版上的什么效果呢？原版上它是一个慢慢悠悠，慢慢悠悠出来的，对吧，慢慢悠悠慢慢悠出来的，而我们这儿这个效果是一下子出来的啊，一下出来，其实小米那也是前一阵子刚改的，最开始小米那个就是什么，就是一移动就就出来了啊，一就出来，现在都是新改的，其实我倒觉得这个效果，这个效果不好啊，因为你二维码嘛，你没必要加这么一个效果，而且东西有点长，你滚起来稍微有点慢，对吧，有点慢，它效果并不好，但是我们在做的问题是，我们在这儿做的话，你咱也不用考虑效果好不好啊，我们直接让他，我们就考虑能不能实现就完事了，对吧，那我们想一下怎么去实现一个效果，那所以这就涉及到了我们如何能隐藏一个元素，实际上我们现在在这儿啊，我先把这个给它都把这注掉，我们现在我隐藏一个元素的方式什么呢？我隐藏一个元素的方式，我是通过display down去隐藏的，哎，这来看啊，我是通过这个。

DIS4便档去隐藏的啊不是这第便档，就是说我写上它了就隐藏，我不写就就就就就我我写上就隐藏，我不写就就显示出来，对吧？这是一种方式，那么其实我们除了用这种方式去隐藏一个元素以外呢，我们还有一种方式，我们还可以干嘛呢？我们还可以直接把它的高度变成零，哎，我们把它的高度变成零，那我们想一下，一个元素的高度为零了，那高度为零，它里面的元素是不是自然而然就隐藏起来了，哎，就隐藏起来，但是同学说老师你这高度是零了，是零，但是元素没隐藏，诶，确实是没隐藏，为什么呢？因为内容溢出了，高度虽然变成零了，但是内容是不是从这等于是从我这个元素里就溢出了，哎，溢出了，所以你高度是零，你还得配合一个over flow黑的，哎，干嘛呢，把溢出的内容给它裁掉，那这样就能达到一个隐藏的目的，你看其实跟我们这个display雷那效果是一样的，既隐藏起来了，也什么呢，也看不见了，懂意思吧，也看不见了啊这么一个效果。

但是这个时候你就产生一个问题，什么问题呢？那你隐藏完了，你怎么让它出来呀？哎，你是通过高度隐藏的，你还可以通过高度让它显示，所以我们只需要让它后时把高度变成148个像素，那这样的话，它是不是就可以出来了，哎，就可以出来了这么一个效果，当然你为了让这三角出来，你把这display block给加上，你看这个跟我们这个display down那种隐藏方式看起来效果是不是是不是一样的呀？哎，是一样的啊，但是你就说了，老师你这说半天。

不还费喷劲，没有什么区别呀，哎，没有什么区别啊，这儿看上去确实是没有什么区别对吧？但是我们要说的是，哎，当我想要给它去加上一些这种动画效果的时候，我们如果是通过disli娜，那就不好加，但是我们如果通过这种高度的改变，我们就好加，哎，怎么好加呢？那现在之所以没有动画效果，首先啊，我们现在当我鼠标移动以后，它实际上是干嘛呢？实际上是在改变我们这个QQR扣的一个高度，本来高度是零，它是把高度逐渐升高，然后我这个元素就显示出来了，是这么种方式，那现在它没有一个动画效果，为什么没有动画效果？因为现在这个QR扣，它是一下子它从零就变成了那个148，一下子从零变成148，所以它没有一个过渡效果，那我们想如果它是什么呢？

它是一点点变的，哎，我先变成一，再变成二，再变成三，一点点变的，那这个时候是不是就会拥有一个动画效果呢？哎，所以现在我们要做的事儿其实很简单，就是不要让它一下子变成148，而是让它干嘛呀，有一个增长的过程，那这一块我们怎么让它体现出这个增长的过程呢？很简单，我们这有一个属性叫做transaction transaction t t叫做一个transaction，这个属性是干嘛的？这个属性它用于为我们这个什么呢？哎，样式设置我们这个过度效果啊，过渡效果，所以我可以写什么呢？比如说我们直接写一个ti，哎，哎，Transaction transaction在这我直接写个hi，然后我写什么呢？我写一个三秒啊，我写一个三秒，那这句话表什么意思？这句话表示的意思就是当你高度这个属性发生变化的时候，高度这个属性，哎，你可能从零变成十了，或者从十变成零了，当高度这个属性发生变化的时候，我要花费三秒钟的时间去切换，哎你像我们之前时间是零，也就说我从零一下子就变到了这个148，但是现在我写上它以后等于什么呢？我不是让它一下子变的，我是让它干嘛呢？要花费三秒的时间。

来变，那这个时候我们就可以看到会有一个什么呢？会有一个慢慢悠悠，慢慢悠悠出来的一个过渡效果，包括一出去也会有，一进去也会有，大家注意它什么时候会出，只有当你这个高度发生变化的时候，因为我当我移送进去的时候，高度是从零变成148呀，当我一出去的时候，它是不是从148就变成零了，哎，这样就会有一个过渡效果啊，这个我们现在先简单介绍一下，后边我们还会细讲，现在你先会用就行了，这写一个高度，这写的时间它就会发生变化啊，发生变化，这就表示高度发生变化的时候，我用三秒的时间去过渡啊，对这个效果进行过渡，当然三秒有点长啊，一般我们0.3秒就够了。

诶，这样是不是就跟原版是一样的效果了，哎，原版是一样的效果啊好，那我们的这个下拉呢，我们也给它处理完了，呃，处理完了以后的话，其实整个上边导航条我们基本上就写完了，写完了以后其实就还有一个，还有一个这个，这个我就我就不写了啊，就不写了，这就当成是你的一个这个呃作业自己来把它去完成一下，因为这个跟这个玩意儿是不是基本是一样的，而且简单了，它没有三角了，就下边多这么一个下拉一个层，你写了就行了，里边的东西呢，就是它刚才第一次切换的，它是有一个动画这个图片的，这显示效果啊，这不用做，你就是移动进去以后能出现这个字就OK了啊，一用这个进去以后，这个字显示就OK了，其他不用做了，那这个我们在课上的时候我就不做了，待会我要做的话，我就继续，我们就往下直接进行啊好，我们这儿还是停一下。