Html 悬停时，展开带有动画的按钮

我在bootstrap vue中创建了一个按钮，它最初会在按钮上显示一个右箭头图标，当鼠标悬停在上面时，它会展开一些文本，一切正常，除了我的图标和文本彼此粘着，所以我尝试在展开按钮的同时添加一些边距，在文本和图标之间添加一些空间。但是，当悬停关闭时，它会关闭按钮，出现一些小故障或不太平滑，因为它试图返回到无边距状态。 我的代码如下，实时代码在这里

我的问题是，有没有一种方法可以让CSS变得平滑

<template>
<div>
    <b-card>
      <template v-slot:footer>
        <b-button id="buttonId" size="sm" pill variant="outline-info">
          <b-icon icon="arrow-right-circle" variant="danger"></b-icon>
          <span>View details</span>
        </b-button>
      </template>
    </b-card>
  </div>
</template>

<script>
export default {};
</script>

<style>
button span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 0.5s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}
button:hover span {
  max-width: 7rem;
  margin-left: 0.3rem
}
</style>

查看详细信息
导出默认值{}；
按钮跨度{
最大宽度：0；
-webkit过渡：最大宽度1s；
过渡：最大宽度0.5s；
显示：内联块；
垂直对齐：顶部；
空白：nowrap；
溢出：隐藏；
}
按钮：悬停范围{
最大宽度：7雷姆；
左边距：0.3雷姆
}

编辑 查看Hiws解决方案，它需要更少的代码，没有额外的元素，效果非常完美

原始答案 退房

基本上，您可以创建一个分隔图标和文本的跨距，而不是在文本上添加边距

查看详细信息

然后玩一点CSS（我已经评论了所有发生变化的内容）

button.text{/*添加了类以区分文本和分隔符*/
最大宽度：0；
过渡：最大宽度0.5s；
显示：内联块；
垂直对齐：顶部；
空白：nowrap；
溢出：隐藏；
}
按钮：hover.text{/*如上所示*/
最大宽度：7雷姆；
转换延迟：0.1s；/*转换必须等待分隔符自身扩展*/
}
按钮分离器{
显示：内联块；/*默认跨度的显示类型为“内联”，忽略宽度更改*/
宽度：0；/*最初它是隐藏的*/
转换：宽度0.1s；/*您可能需要调整此设置。重要的是，将其与.text上的转换延迟保持同步*/
转换延迟：0.5s；/*等待.text.text“收缩”结束。如果按钮悬停，则会覆盖此选项。Ofc将其与.text转换持续时间保持同步*/
}
按钮：悬停。分隔符{
宽度：0.3em；/*这是“边距”宽度*/
转换延迟：unset；/*如果按钮悬停，我们根本不想等待转换*/
}

时间安排可以改进，但总体机制很好。

EDIT 查看Hiws解决方案，它需要更少的代码，没有额外的元素，效果非常完美

原始答案 退房

基本上，您可以创建一个分隔图标和文本的跨距，而不是在文本上添加边距

查看详细信息

然后玩一点CSS（我已经评论了所有发生变化的内容）

button.text{/*添加了类以区分文本和分隔符*/
最大宽度：0；
过渡：最大宽度0.5s；
显示：内联块；
垂直对齐：顶部；
空白：nowrap；
溢出：隐藏；
}
按钮：hover.text{/*如上所示*/
最大宽度：7雷姆；
转换延迟：0.1s；/*转换必须等待分隔符自身扩展*/
}
按钮分离器{
显示：内联块；/*默认跨度的显示类型为“内联”，忽略宽度更改*/
宽度：0；/*最初它是隐藏的*/
转换：宽度0.1s；/*您可能需要调整此设置。重要的是，将其与.text上的转换延迟保持同步*/
转换延迟：0.5s；/*等待.text.text“收缩”结束。如果按钮悬停，则会覆盖此选项。Ofc将其与.text转换持续时间保持同步*/
}
按钮：悬停。分隔符{
宽度：0.3em；/*这是“边距”宽度*/
转换延迟：unset；/*如果按钮悬停，我们根本不想等待转换*/
}

---

虽然Kamil的解决方案非常聪明，但我发现如果你在不让动画结束的情况下快速悬停在按钮上，你会看到奇怪的“弹出”，因为分隔符只在0.5秒延迟后才会消失

相反，我试图操纵按钮和跨度的填充，以获得类似的结果

newvue({
el:“#应用程序”
})

.details按钮{
右填充：0px！重要；/*删除默认填充*/
}
.详细信息按钮范围{
最大宽度：0；
显示：内联flex；
空白：nowrap；
过渡：最大宽度0.5s，右侧填充0.45s；/*过渡宽度和填充以避免“弹出”*/
溢出：隐藏；
左侧填充：5px；/*添加默认按钮填充*/
}
.details按钮：悬停范围，.details按钮：焦点范围{
最大宽度：100px；/*文本可以扩展的距离，根据内容进行调整*/
右填充：10px！重要；/*在展开时在文本右侧添加间距*/
}

阅读更多

虽然Kamil的解决方案非常聪明，但我发现如果你在不让动画结束的情况下快速悬停在按钮上，你会看到奇怪的“弹出”，因为分隔符只有在0.5秒的延迟后才会消失

相反，我试图操纵按钮和跨度的填充，以获得类似的结果

newvue({
el:“#应用程序”
})

.details按钮{
右填充：0px！重要；/*删除默认填充*/
}
.详细信息按钮范围{
最大宽度：0；
显示：内联flex；
空白：nowrap；
过渡：最大宽度0.5s，右侧填充0.45s；/*过渡宽度和填充以避免“弹出”*/
溢出：隐藏；
左侧填充：5px；/*添加默认按钮填充*/
}
.details按钮：悬停范围，.details按钮：焦点范围{
最大宽度：100px；/*文本可以扩展的距离，根据内容进行调整*/
右侧填充：10px！重要；/*在t的右侧添加间距