菜单组件不够丝滑怎么办

在新开发的项目中因为不想用element而自己写了一个菜单组件，写的时候遇到了一个问题——过渡效果不够丝滑。

当我对文字内容不做任何处理时，文字默认对齐左侧，折叠时只展示如右图的图标，展开时有一个0.5秒的过渡，然后文字逐渐展开，但是现在的效果是展开时文字挤成了一团，视觉效果很差。

所以我想做一个优化，理想的效果是向右侧展开时，文字必须一行展示，但是超过部分隐藏，随着宽度向右逐渐呈现出来。

• 文字一行展示
• 超出部分隐藏
• 过渡

解决代码如下：

.menuName {
  width: 100px;
  overflow: hidden;
  text-align: start;
  white-space: nowrap;
}

溢出隐藏需要设置宽度，所以我设置了100的宽度，由于继承了父元素的文本中间对齐，所以额外设置了text-align向左对齐，最重要的一点是文字不换行white-space：nowrap。

最后效果如下：

最后是延长了过渡时间的效果，文字看起来是比较丝滑了，但是外面的盒子好像跟不上，等我稍后再研究研究。

问题的原因是我在菜单外层多加了一个div，俩div都设置了过渡，但是过渡走的路程不一样，最后导致了bug，解决办法是删除了多余的div，然后还做了一些细节调整。