需求简介
这几天接了个新项目，需要实现下图中左侧边栏的菜单切换。这种功能其实就是一个折叠面板，实现方式多种多样。

实现上面的功能，无非就是一个v-show的事儿，但没有过渡，会显得非常生硬。想添加一些过渡效果，

最简单的就是使用element ui、或者ant的折叠面板组件了。但可惜的是，我们的项目不能使用任何第三方组件库。

为了做好产品，我还是略施拳脚，实现了一个简单且丝滑的过渡效果：

老板看后，觉得我的细节处理的很好，给我一顿画饼，承诺只要我好好坚持，一定可以等到升职加薪！当然，我胃口小，老板的饼消化不了。我还是分享一下自己在不借助第三方组件的情况下，如何快速的实现这样一个效果。
技术实现方案
业务分析
仔细观察需求，我们可以分析出其实动画主要是两个部分：一级标题的箭头旋转和二级标题区域的折叠展开。

我们先实现一下基本的html结构：
<template>
<div class="nav-bar-content">

<div class="header-wrap" @click="open = !open">
<span class="text">自动化需求计算条件输如</span>
<span class="arrow">
>
</span>
</div>

<div v-show="open" class="content">
<p>算法及跃变计算条件</p>
<p>空间品质判断条件</p>
<......