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

Question

我在bootstrap-vue中创建了一个按钮，该按钮最初在其上显示一个右箭头图标，当悬停在其上时，它会带有一些文本扩展，除了我的图标和文本相互粘着之外，其他所有东西都可以正常工作，因此我尝试放置一些按钮边距时，可以扩展按钮以在文本和图标之间添加一些空间，但是在悬停时，它会由于出现小故障或关闭不平稳而关闭按钮，因为它试图返回到无边距状态。我的代码如下，实时代码在CodeSandbox

我的问题是，有什么方法可以使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>

Answer 1

签出this fork of your CodeSandbox。

Answer 2

虽然Kamil的解决方案非常聪明，但我发现如果您快速将鼠标悬停在按钮上而不让动画结束，您会看到一个奇怪的“弹出”，因为分隔符仅在0.5秒的延迟后消失。