实现多个菜单或者多个操作按钮一键收起展开

项目中有多个菜单按钮，显示为一排时很占位置不好看，所以就考虑做成可以收缩起来，使用时在展开，并且加上收起展开的动画效果，使其看起来更加自然好看，效果展示图片如下（结尾有视频效果展示）：

展开时：

收起时：

下面将我实现的代码展示：

html代码片段：

<div class="bottom-operate-container">
        <transition name="slide">
          <div
            class="bottom-operate"
            :style="{ width: showBottomOperate ? '680px' : '0' }"
          >
            <div class="item" @click="enroll">
              <img src="@/assets/images/student/register-audit.png" alt=