css - scaleX(0) 正在占用宽度

Question

我试图让这个按钮只显示图标并只在悬停时显示按钮文本，但我无法让它只在 CSS 上工作。

我已经尝试过转换宽度和最大宽度，但没有提供预期的结果，转换没有发生。它“跳跃”了。

这是 HTML

  <div class="button--text-container">
    Buttontext
  </div>

这是根据SCSS

&--text-container {
  transform: scaleX(0);
  font-size: $buttontext-size;
  line-height: $buttontext-size;
  background: rgba(0,0,255,.1);
}

&:hover {
  .button--text-container {
    margin-left: $buttontext-size;
    transform: scaleX(1);
  }
}

请查看我创建的代码笔: https://codepen.io/hergi/pen/rNBxJGR

我希望按钮与图标成圆形，并通过动画显示按钮文本。以某种方式转换:scaleX(0) 不适用

Answer 1

您可以设置字体大小的动画:

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  background: rgba(255, 0, 0, 0.1);
}

.buttoncontainer {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 255, 0, 0.1);
}
.buttoncontainer .button {
  display: flex;
  padding: 20px;
  background: rgba(255, 0, 0, 0.1);
  border-radius: calc(20px * 1.5);
}
.buttoncontainer .button--icon-container {
  height: 20px;
  display: flex;
  justify-content: center;
  align-content: center;
  background: rgba(0, 0, 255, 0.1);
}
.buttoncontainer .button--icon-container img {
  max-height: 20px;
  max-width: 20px;
}
.buttoncontainer .button--text-container {
  transform: scaleX(0);
  font-size: 0;
  line-height: 20px;
  margin-left: 0;
  background: rgba(0, 0, 255, 0.1);
  transition: ease transform 0.2s, ease margin-left 0.2s,ease font-size 0.2s;
}
.buttoncontainer .button:hover .button--text-container {
  margin-left: 20px;
  transform: scaleX(1);
  font-size: 20px;
}

<div class="wrapper">
  <div class="buttoncontainer">
    <div class="button">
      <div class="button--icon-container">
        <img src="https://image.flaticon.com/icons/svg/1157/1157044.svg" />
      </div>
      <div class="button--text-container">
        Buttontext
      </div>
    </div>    
  </div>
</div>