我为展开收起功能做了动画，被老板称赞！

主要观点总结

本文介绍了一种在不使用第三方组件库的情况下，通过Vue.js实现简单且丝滑的折叠面板效果的方法。通过动态绑定CSS样式和Vue的`transition`组件，实现了折叠面板的动画效果。文章还提供了两种实现方式，一种是使用动态类名，另一种是使用动态样式。同时，文章也提到了如果使用第三方组件库如Element UI会更加简单。

关键观点总结

关键观点1: Vue.js实现折叠面板效果

通过Vue.js，不使用第三方库，实现简单且丝滑的折叠面板效果。使用Vue的`transition`组件和动态绑定样式实现动画效果。

关键观点2: 两种实现方式

提供了两种实现方式，一种是使用动态类名，另一种是使用动态样式。这两种方式都能实现折叠面板的动画效果。

关键观点3: 第三方组件库的优势

使用第三方组件库如Element UI会更加简单，但考虑到项目限制，手动实现也是一种可行的方法。

关键观点4: 动态样式和类名

通过动态绑定样式和类名，实现了折叠面板的动画效果，包括箭头旋转和折叠区域的折叠展开。

文章预览

需求简介 这几天接了个新项目，需要实现下图中左侧边栏的菜单切换。这种功能其实就是一个 折叠面板 ，实现方式多种多样。 实现上面的功能，无非就是一个 v-show 的事儿，但没有过渡，会显得非常生硬。想添加一些过渡效果， 最简单的就是使用element ui、或者ant的折叠面板组件了。但可惜的是，我们的项目不能使用任何第三方组件库。 为了做好产品，我还是略施拳脚，实现了一个简单且丝滑的过渡效果： 老板看后，觉得我的细节处理的很好，给我一顿画饼，承诺只要我好好坚持，一定可以等到升职加薪 ！当然，我胃口小，老板的饼消化不了。我还是分享一下 自己在不借助第三方组件的情况下，如何快速的实现这样一个效果。 技术实现方案 业务分析 仔细观察需求，我们可以分析出其实动画主要是两个部分： 一级标题的箭头旋转 和 二级标题 ………………………………