139.尚硅谷_JS基础_二级菜单-过渡效果

看我们这二级小单功能呢，实际上都完成了，那接下来我们差的就是什么呀，它这个效果稍微差一点是吧，你看人家这个它应该干嘛呀？诶慢慢悠悠慢慢悠悠的展开，这是什么呢？慢慢悠悠慢悠悠的合上是吧，但是咱们这个呢，就是就是干净利索，快咔咔咔很过瘾是吧，这种感觉是吧，那咱们这应该你像我要给他配点音效，感觉还不错是吧，咔咔是吧？嗯，但是现在我们来看，我们要做成这个效果的话，它应该是什么样的呀，现在我们这个菜单是这样的，我们这个效果是什么呀？咔一下叠起来了，但是应该什么效果呀，应该是慢慢悠悠，慢慢悠慢慢悠是这么这个效果呀，展开的时候也是什么呀，慢慢悠慢慢悠慢游是到到这个地方啊，诶，那所以你会发现什么呢？我要想执行这个动画，我有两个位置，实际上我是从什么呀，我是从一个位置，咱们假设这个位置叫什么呢？叫A从A到。B去修改这个高度值吧，哎，那假设什么呢？假设我这个情况，那我这个是不是有一个高度啊，这个高度就是我们这什么呀？诶，那我叠起来，这是不是有一个高度，这个高度相当于什么呢？是我们这个。

B，那所以我这儿去做这个动画，实际上就是什么呀，是不是就从这个A到。B去做这个过渡啊，哎，去做这个过渡，那当我展开的时候，是不是反过来啊，从哪啊，是不是从B。到A去做过渡啊，诶，所以我在去做这个动画的效果的时候，实际上就什么呀，就是在两个高度之间去做什么呀，做这个过渡的效果啊，做这个过渡，那现在就面临一个第一个问题，那现在我这个自动化，既然我是从A到B去过渡，那问题来了，我这个A是谁这个。B就是谁对吧？来，你要不知道这两个值，我们这个动画相是做不了的，那所以我们第一个事儿我要干嘛呢？我要先获取这个A和B的值啊，B的值，那我们来看怎么获取啊，怎么获取，来回到我们这儿，看到我们这个页面，那现在你来看这我这是来了一个叫做一个Togo class，其实这不应该叫关闭div了，应该叫做一个切换我们这个partner div的一个显示，我会发现我这是不是调了一个Togo class呀，在这儿我调用Togo class以后，我这个元素是不是就叠起来或者展开了呀，哎，或者展开了，所以看我干嘛啊我干嘛，诶我在Togo class之前，在切换这个类之前，我来干嘛呢？我来获取一个高度啊，获取我们这个元素的这个高度啊，获取元素的高度，那我来什么呢？来一个Y，一个我们来一个be.begin等于一个叫做parent点点一。

一个来一个offet，一个，我是不是在这儿获取了一个它的高度啊，这是在Togo class之前获取的，然后呢，在我们这个切换类之后来获取一个高度，来什么呢？挖一个end等于一个parent div，点一个什么呢？点一个of set一个。

Head，诶，Outside，那现在来看，在切换class之前，我获这个高度叫begin，在切换class class之后，我获取这高度叫做一个end的，那我问你这两个高度它一样吗？这两个值。肯定不一样吧，诶因为我这切换class以后，高度是不是肯定会发生变化呀，诶发生变化，那所以我们来看看这两个值啊，我直接来一个cancel.log来什么呢？Be等于我加上一个begin，然后加上一个什么呢？我再加上一个这个逗号，来一个end，等于我再加上一个and，我是不是把这两个值给它输出一下啊，一保存咱们来看效果，现在一刷新打开我们控制台，现在看控制台我这一点是不是折叠呀，哎，我一点走，你来看比G是多少。222对吧，摁的是25，那现在我要执行过渡效果，是不是把它的高度从222向这个25去过度，哎，现在我展开啊，我一点它是不是展开了，那这个begin是25，摁的是。

二二对吧，那现在我要执行动画是不是从25向这个222去过度啊，哎，这其实这begin是不是就我们动画开始的值摁的是不是我们动画结束的值，哎，那再来看这啊，我一点它走你这一什么呀？诶begin是25摁的是。124，也就是说从25往124去过渡吧，好，那现在呢，比定的还有N的值我们都获取到了，所以这里边我们来说一下这两个值有了，那我们来说什么呢？我们要执行动画。我们这个动画效果就是什么呢？就是将我们这个高度从什么呢？从我们这个begin，诶begin向什么呢？像我们这个N的是不是过渡啊，哎，从begin向N的过渡，这能理解吧，起始值找到了，终点值找到了，现在面临什么问题？

什么问题，现在看着啊，我一点它一展开了，比begin是25，摁的是222，对吧，你会发现什么呢？我这个元素它现在的高度是怎么样，一下子就变成二二了吧，也就是说它没有这个过渡过程，我这一点咱们来看，我现在一点它是不是一下子就变成25了呀，没有这个过渡的一个过程啊，没有一个过渡过程，所以现在咱们还能不能设置动画。不能，因为它是不是一次都变了呀，诶来，那我要想从222过渡到25，那首先它的高度得是谁呀？你得先是二二吧，我才能往这过度吧，你都已经变成25了，我这动画是不是没有意义了呀？诶那怎么办呢？但是来一个问题了，当我们一调完这个脱过class以后，我们这个元素的高度是不是立即就变了呀？诶立即就变了，那怎么办呢？哎，我在这做一个事儿干嘛呢？将我们这个元素的高度干嘛呢？重置为什么呢？Begin直接来一个叫做parent div parent div点一个什么呢？Style，点一个headde等于什么呢？等于一个begin，然后加上一个PX，那这块什么效果了，我这块是不是设置的是一个内联样式啊，内联样式这个是一个样式表，里边样式哪个优先，是不是内联样式优先呀，哎，内联样式先也就是说什么呢，我。

再获取它一个初始之前的高，这个切换之前的高度，然后我是不是切换class呀，然后再获取一个切换之后的高度，然后我再通过内联样式将这个什么呀值是不是设置成那个begin呀，换句话说，现在你说我点一下它有没有变化，是不是没变化呀，诶不会发生任何变，除了箭头啊，箭头class变了它会变，其他的是不是不会发生任何变化呀，为什么？因为我点的时候是不是给它设置一个这个内联项式，还的是222啊，设置完了它的预先级是不是最高啊，所以就改不了了啊，就改不了了，听导同学说了，这不神经病吗？切换完了好不容易改过来了是吧，你就写一个内联样式把它改回去，那改回去有什么好处，这样我们是不是就可以执行动画了，哎，咱们就可以让它慢慢悠悠慢慢悠悠的回去了，诶那同学说了，那老师你这步能不能不做呀，这步能不能不做呀。

哎，不能因为你不做这个高度我们是不是获取不到啊，因为它的目标高度我们不确定，所以我们必须得切换一下，我才能确定这个高度啊，确定这高度，但是这一个步骤实际上在这里边干嘛呀，它是不是体现不出来呀？诶体不出来啊好，那接下来呢，高度改了，那接下来我们是不是可以执行动画了，诶执行我们这个动画从什么呢？从我们这个begin，像我们这个N的过渡，那这块就要弄谁了，我们那个木函数吧，诶木函数第一个参数是我们执行动画这个对象，也就是我们这个parent div，第二个是我们这个属性，属性我们要设置的是这个he吧，诶高度第三个参数是我们动画的一个目标，目标就是我们这个摁的吧，诶摁的值，然后第四一个是我们这个速度，速度咱们来一个十吧，诶十个像度，十个像素有点快，我们先看看，然后来一个扣BY，回到函数呢，咱们先写上，哎，不知道用不用，不用咱们再给它删了，先给它占上地啊，我这一保存这时就。

漂亮，再来看效果啊，这一刷新来走你。哎。是不是就行了呀，哎，就行了啊来我们来看看控制台选中这个，当我一点它的时候呢，咱们来看啊看div这div我这一点是不是这高度一直在变呀，哎，高度一直在变啊，就这么一个效果就完成了啊就完成了，诶但是你会发现什么呢？我这高度过度完了，但是它这个style这害的25是吧，其实这25你设不设置都行，因为这club的值是不是也是25啊，哎，你这也设置25，设不设置都行，但是我们来说这有没有什么影响，诶来啊看看我再切换走你。

走你走你，诶没用了是吧？诶我第一下点的时候，我记着还还管用了是吧，一而三三再点没用了，我点这个也管用是吧，再点一个又没用了是吧，我点它哟哟，咱们这都是一帧灵是吧，只能点一下，第二下是不是就不好使了呀？哎呀这是为啥呀？哎，我们说了咱们来看啊，当我去切换完这个元素以后，你看div现在这是不是没有样式啊，我这一点切换完了以后，它是不是剩下一个内联样式叫做25个像素啊，那么说了，内联样式是不是我们这优先级最高的呀？好，你这设置内两项式，现在我们的DF的高度是25PX，那我现在问你，我这一点它点它以后是不是触发我这函数啊，我这要获。

再举一个begin begin是多少？毫无疑问是25对吧？然后你就Togo class切换这个类，那注意了，此时你再切换class，还会不会对我们这个元素的高度产生影响了，不会了，因为你那连线式是不是25已经写死了呀，所以你这摁的还是谁了？还是25好了，你执行动画从25~25，那就是我们刚才看的那个效果，那个效果是不是一点错没有啊，哎，这说没有那是不是就不对了呀？哎，所以这块注意那怎么办呀？那怎么办呀？哎，那我们来说，我为什么这要设置一个内联样式，是不是就是为了执行动画呀，那现在我这动画干嘛了，我是不是已经执行完了呀？动画执行完了，这个内联样式还有没有用了，他是不是没有存在意义了，他在这儿只有一个作用，就是给我们添乱对吧？所以这里边我们来说，一旦动画真传壁啊，我们说了内联这个量式是不是没有任何存在意义啊，所以我们需要干嘛呀，是不是给他删了呀？那咱们先说删，咱们好整，那什么时候删呀？

是不是动画执行完了你再删呀，不然你删掉是不是出事了，哎，那我怎么知道动画执行完了，哎，是不是回调函数啊，哎，当回调函数执行的时候，动画是不是就执行完了呀，所以在这儿我们来干嘛呢？动画执行完毕，我们这个内联样式已经没有存在的这个意义了，哎，删除之。怎么删，直接parent div，点一个style，点一个head，等于一个空串就完事，空串是不就没了呀，这样一保存咱们再看现在一刷新一点走你诶你看还有没有了。是不是就没了，诶你看我再点是不是就行了，哎，就可以再点。

也没问题，是不是就OK了呀，因为你执行完动画，你那联手给你删了啊，就不再产生任何影响了，你看这回我们这个时候就。OK了，诶每一个就都可以去点了啊，每一个都可以去点了，好那咱们这个动画就执行完了，你会发现我们为了执行这个动画，我们要是做很多多余的事情啊，而且这些事情对我们功能没有任何帮助，就是什么呀，就是满足我们这个这个欲望是吧，满足我们这个眼睛的欲望，我们觉得这样可能好看一点是吧，所以我们就多做了很多事啊，多了很多事，好那现在做完了，但是是做真做完了吗？来在线工具点完了，我点击支持我们。这个再点什么效果，展开的时候还挺慢的是吧，关的时候是还是瞬间关闭啊，是不是跟这种感觉有挺好的吧，但是有点有点有点炸呼，这种感觉是吧，有点炸，我们希望什么呀，你展开的时候是慢慢悠悠的，你关的时候你是不是也慢慢悠悠的，他为什么关的时候不是慢慢悠的，哎，我这一块动画是不是应该在这儿加呀？哎，在这加，而我刚才是不是只加了一个位置在下边，我是没有去加呀，哎，没有去加，那这块怎么办呀，我是不是在这也。

加一下，哎，那这块我们能不能，我一看是不是都是一样的呀，哎，我能不能把它提取出来，哎提取出来来，那我们再。看看在哪提取合适啊，这在哪提取都没事，咱们直接在在在这在这提取吧，因为咱们只是那不用其他地方也不用直接来一个function function叫做一个tule，叫做一个Togo menu是不是切换我这个元素的一个显示状态啊，然后呢，我直接把这一堆代码从这。往下直接CTRLX给它粘过来，但是注意了，光粘它行不行。有没有哪需要改的，我这还是parent div呢，我应该是谁呀，那不一定吧，那应该是什么呀，你给我传谁，我就切换谁吧，诶所以来一个什么呀，Obj啊obj，这就改成obj obj obj这也是obj。

这儿呢，也别忘了都是改成什么呀，五笔记那这个方法干嘛呢？用来诶切换我们这个什么呢？切换我们这个菜单的叫做折叠和这个显示状态啊，用来切换我们这个菜单和折这个折叠和显示状态，那现在在这儿我就不用调了，直接来什么呢？来切换我们这个菜单的这个显示状态，直接来一个叫做一个t Togo menu，不要忘了传一个parent div参数传过来咱们再看，先看效果啊，我一刷新走你走你是不是一样的效果呀，哎，这一样的效果，但是注意了，是不是还得这得加一样，这加就好加了，直接干嘛呀，我复制一下改成什么呢？改成一个open div，那这块你就发现了，我之前为什么要把它改成什么呀？Togo class，那么假设这里边还是A的class。

它有什么问题，我还能不能换了，我是不能换了呀，因为在方法里边，我是不是用的是top class呀，你在这如果给它换成这个艾特以后，它是不是就会出问题呀，所以为什么要换，就是为了干嘛呀，统一处理啊，为了统一处理啊保存这回再看效果，我这一刷新来点开没问题，点开没问题再点开。再点开。是不是就这么一个效果呢，哎，比刚才就稍微的要诶就好一点了是吧，哎就好一些了啊好，那这一块呢，功能我们就给它完成了啊，功能给它完成了啊，所以这块呢，大家再好好看一下，其实就把这个方法给它提取出来了，在它执行动画之前获取一个值，不是在它这个切换class之前获取一个值，切换class之后再获取一个值，然后我们就是把动画什么呀，从一个值往另一个值去过渡，这个动画就给它实现了啊，就实现了，好停一下。