我为展开收起功能做了动画，被老板称赞！ 点击关注公众号，“技术干货”及时达！ 需求简介这几天接了个新项目，需要实现下图中左侧边栏的菜单切换。这种功能其实就是一个「折叠面板」，实现方式多种多样。 实现上面的功能，无非就是一个「v-show」的事儿，但没有过渡，会显得非常生硬。想添加一些过渡效果， ?最简单的就是使用element ui、或者ant的折叠面板组件了。但可惜的是，我们的项目不能使用任何第三方组件库。 ?为了做好产品，我还是略施拳脚，实现了一个简单且丝滑的过渡效果： 「老板看后，觉得我的细节处理的很好，给我一顿画饼，承诺只要我好好坚持，一定可以等到升职加薪」！当然，我胃口小，老板的饼消化不了。我还是分享一下自己在不借助第三方组件的情况下，如何快速的实现这样一个效果。 技术实现方案业务分析仔细观察需求，我们可以分析出其实动画主要是两个部分：「一级标题的箭头旋转」和「二级标题区域的折叠展开」。 我们先实现一下基本的html结构： template divclass="nav-bar-content" divclass="header-wrap"@click="open=!open" spanclass="text"自动化需求计算条件输如/span spanclass="arrow" /span /div divv-show="open"class="content" p算法及跃变计算条件/p p空间品质判断条件/p p需求自动计算条件/p p通风系统/p /div /div /template scriptsetup constopen=ref(false); /script 上述代码非常简单，点击一级标题时，更改open的值，从而实现二级标题的内容区域展示与隐藏。 箭头旋转动画实现箭头旋转动画其实非常容易，我们只要在红色面板展开时，给箭头添加一个新的类名，在这个类名中做一些动画处理即可。 template divclass="header-wrap"@click="open=!open" spanclass="text"自动化需求计算条件输如/span spanclass="arrowflex-be-ce":class="{open:open}" /span /div /template stylelang="less"scoped .arrow{ width:16px; height:16px; cursor:pointer; margin-left: transition:transform0.2sease; } .open{ transform:rotate(90deg); transition:transform0.2sease; } /style 上述的代码通过 CSS 的transform 属性和动态绑定open类名实现了箭头的旋转效果。 ?注意：arrow也需要定义过渡效果 ?折叠区域动画效果要实现折叠区域的动画效果，大致思路和上面一样。 使用vue的transition组件实现借助vue的transition组件，我们可以实现折叠区域进入（v-show='true'）和消失（v-show='fasle'）的动画。一种可行的动画方案就是让面板进入前位置在y轴-100%的位置，进入后处于正常位置。 template divclass="nav-bar-content" divclass="header-wrap"@click="open=!open" spanclass="text"自动化需求计算条件输如/span spanclass="arrow":class="{open:open}" /span /div divclass="content-wrap" Transition divv-show="open"class="content" p算法及跃变计算条件/p p空间品质判断条件/p p需求自动计算条件/p p通风系统/p /div /Transition /div /div /template scriptsetup constopen=ref(false); /script stylelang="less"scoped .v-enter-active, .v-leave-active{ transition:transform0.5sease; } .v-enter-from, .v-leave-to{ transform:translateY(-100%); } /style 上述效果有一点瑕疵，就是出现位置把一级标题盖住了，我们稍微修改下 divclass="content-wrap" Transition divv-show="open"class="content" p算法及跃变计算条件/p p空间品质判断条件/p p需求自动计算条件/p p通风系统/p /div /Transition /div .content-wrap{ overflow:hidden; } 使用动态类名的方式实现效果好很多！但这种效果和第三方组件库的效果不太一致，我们以element的折叠面板效果为例： 我们可以发现，它的这种动画，是折叠面板的高度从0逐渐增高的一个过程。所以最简单的就是，如果我们知道折叠面板的高度，一个类名就可以搞定！ template divclass="nav-bar-content" divclass="header-wrap"@click="open=!open" spanclass="text"自动化需求计算条件输如/span spanclass="arrowflex-be-ce":class="{open:open}" /span /div divclass="content-wrap":style="{height:open?'300px':0}" divclass="content" p算法及跃变计算条件/p p空间品质判断条件/p p需求自动计算条件/p p通风系统/p /div /div /div /template scriptsetup constopen=ref(false); /script stylelang="less"scoped .content-wrap{ height:0; transition:height0.5sease; } /style 如果这个折叠面板的内容通过父组件传递，高度是动态的，我们只需要使用js计算这里的高度即可： template divclass="nav-bar-content" divclass="header-wrap"@click="open=!open" spanclass="text"自动化需求计算条件输如/span spanclass="arrowflex-be-ce":class="{open:open}" /span /div divclass="content-wrap":style="{height:open?'300px':0}" divclass="content"ref="contentRef" slot/slot /div /div /div /template scriptsetup constopen=ref(false); constcontentRef=ref(); constheight=ref(0); onMounted(()={ height.value=contentRef.value.offsetHeight+'px'; }); /script stylelang="less"scoped .content-wrap{ height:0; transition:height0.5sease; } /style 这样，我们就通过几行代码就实现了一个非常简单的折叠面板手风琴效果！ 总结要想实现一个折叠面板的效果，最简单的还是直接使用第三方组件库，但是如果项目不能使用其他组件库的话，手写一个也是非常简单的！也希望大家能在评论区给出更好的实现方式，供大家学习！ 点击关注公众号，“技术干货”及时达！ 阅读原文