如何在过渡兄弟元素宽度时防止文本移动

Question

我正在开发一个网站，该网站将有一个“了解更多”按钮，该按钮分为两部分，一部分说“了解更多”，另一部分说“+”。当鼠标悬停在其上时，“了解更多”部分消失，“+”增大以占据按钮的整个空间，我通过使用 css 对按钮两半的宽度进行动画处理来做到这一点。问题在于，随着元素宽度的减小，文本会移动/换行。这是该按钮当前工作方式的 gif： 了解更多按钮

我想找到一种方法，让文本保持在原位，并在鼠标悬停在按钮上时消失在“+”元素后面，而不会换行。我在网上搜索过，尝试过使用自动换行和位置属性，还尝试过将按钮文本放入段落内，但我无法使其工作。我感觉这很简单，但我就是无法解决。或者，如果有一种更简单的方法来创建具有此功能的按钮，我也很想知道。这是我的代码：

.button-container {
  height: 4vw;
  width: 19vw;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
}

.button {
  height: 4vw;
  align-content: center;
  font-family: "Comfortaa", cursive;
  transition-duration: 0.6s;
  transition-property: width;
  transition-timing-function: ease-in-out;
}

.button-label {
  width: 15vw;
  background: #07BEB8;
  color: #FFF;
  font-size: 1.3vw;
  overflow: hidden;
}

.button-symbol {
  width: 4vw;
  background: #3DCCC7;
  color: #FFF;
  border-left: solid #FFF;
  font-size: 1.6vw;
  font-weight: bold;
}

.button-container:hover .button-label {
  width: 0;
}

.button-container:hover .button-symbol {
  width: 19vw;
}

```

<button class="button-container">
            <div class="button button-label">Learn More</div>
            <div class="button button-symbol">+</div>
        </button>

Answer 1

由于

grid-template-columns

是可设置动画的，一种选择是使用

grid

来代替并设置网格列大小的动画。这样，您可以在标签上设置

overflow:hidden

并防止更改其宽度，以使文本不会移动。

.button-container {
  height: 4vw;
  width: 19vw;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 15vw 4vw;
  transition-duration: 0.6s;
  transition-property: grid-template-columns;
  transition-timing-function: ease-in-out;
}

.button {
  height: 4vw;
  align-content: center;
  font-family: "Comfortaa", cursive;
}

.button-label {
  overflow: hidden;
  width: 15vw;
  background: #07BEB8;
  color: #FFF;
  font-size: 1.3vw;
  overflow: hidden;
}

.button-symbol {
  width: 100%;
  background: #3DCCC7;
  color: #FFF;
  border-left: solid #FFF;
  font-size: 1.6vw;
  font-weight: bold;
}

.button-container:hover {
  grid-template-columns: 0vw 19vw;
}

<button class="button-container">
    <div class="button button-label">Learn More</div>
    <div class="button button-symbol">+</div>
</button>

此外，虽然偏离了主题，但您可能会注意到，当窗口宽度更改时，最初会出现闪烁。这是因为动画属性基于窗口宽度。这可以通过使用包装器并在其上定义 19vw 宽度来解决，以便动画宽度可以基于父容器的宽度，而父容器的宽度永远不会改变。

.wrapper {
  width: 19vw;
}

.button-container {
  height: 4vw;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
  display: grid;
  width: 100%;
  grid-template-columns: calc(15/19 * 100%) calc(4/19 * 100%);
  transition: grid-template-columns 0.6s ease-in-out
}

.button {
  height: 4vw;
  align-content: center;
  font-family: "Comfortaa", cursive;
}

.button-label {
  overflow: hidden;
  width: 15vw;
  background: #07BEB8;
  color: #FFF;
  font-size: 1.3vw;
  overflow: hidden;
}

.button-symbol {
  width: 100%;
  background: #3DCCC7;
  color: #FFF;
  border-left: solid #FFF;
  font-size: 1.6vw;
  font-weight: bold;
}

.button-container:hover {
  grid-template-columns: 0vw 19vw;
}

<div class="wrapper">
  <button class="button-container">
      <div class="button button-label">Learn More</div>
      <div class="button button-symbol">+</div>
  </button>
</div>

Answer 2

只需将

white-space: nowrap

添加到标签即可。

.button-container {
  height: 4vw;
  width: 19vw;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
}

.button {
  height: 4vw;
  align-content: center;
  font-family: "Comfortaa", cursive;
  transition-duration: 0.6s;
  transition-property: width;
  transition-timing-function: ease-in-out;
}

.button-label {
  width: 15vw;
  background: #07beb8;
  color: #fff;
  font-size: 1.3vw;
  overflow: hidden;
  white-space: nowrap;
}

.button-symbol {
  width: 4vw;
  background: #3dccc7;
  color: #fff;
  border-left: solid #fff;
  font-size: 1.6vw;
  font-weight: bold;
}

.button-container:hover .button-label {
  width: 0;
}

.button-container:hover .button-symbol {
  width: 19vw;
}

<button class="button-container">
  <div class="button button-label">Learn More</div>
  <div class="button button-symbol">+</div>
</button>