css宽度设置自适应时过渡效果失效

前言

给一个设置一个最小值，当鼠标hover的时候让它根据文本自定义宽度，同时添加一个过渡效果。

存在问题的思路

其实这个需求很简单，有点基础的人都能一眼看出它的实现步骤。无非就是设置个最小值跟自适应还有过渡就解决的，事实上我一开始也是这样做的。但问题就出现了，看下面效果图。

失败的效果图

代码部分

html

因为时间问题就不把遍历的数据源放上来，有兴趣的同学可以自己创建一下数据。Steps为 View Design 框架的步骤条。

	<aside>
        <!-- 单选题测试 -->
        <Steps class="Steps" direction="vertical">
          <Step class="stepItem" :key="index" v-for="(item, index) in teacherData.groupList" :content="item.groupName"></Step>
        </Steps>
    </aside>

css

    width: 50px;
    border: 1px solid #ccc;
    position: fixed;
    right: 0;
    top: 30%;
    text-align: left;
    padding: 10px;
    border-radius: 10px 0 0 10px;
    transition: all .5s;
    background: #fff;
    cursor: pointer;
    &:hover{
      width: fit-content;
      transition: all .5s;
    }

通过效果图可以看出，我们已经实现了盒子根据最大长度的文本自适应，但过渡的效果却没有了。
一开始是挺蒙圈的，按照常理来说我设置了一个过渡前的值跟一个过渡后的值完全可以实现过渡效果了啊，为什么过渡效果会不生效呢。
原来，折叠元素的宽度或者高度必须设置一个值才可以有过渡的效果，要不然过渡效果就不生效。我使用的fit-content虽然能够自适应文本，但同时也让它没有了一个固定的宽度。

解决方法：将前后样式中的width转成max-width。且转变后的width远大于转变前的即可解决

可行方法

css

aside{
    max-width: 50px;
    border: 1px solid #ccc;
    ......
    &:hover{
      max-width: 900px;
      transition: all .5s;
    }

可行效果图