scaleX(0) 占用宽度答案

【问题标题】：scaleX(0) is taking up widthscaleX(0) 占用宽度
【发布时间】：2019-12-20 08:41:18
【问题描述】：

我试图让这个按钮只显示图标并只在悬停时显示按钮文本，但我不能让它只工作 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) 没有应用

【问题讨论】：

您正在寻找手风琴或最小化效果。这些都是一件很麻烦的事情，因为你不能在 auto 和其他任何东西之间进行切换。通常，人们使用 js 根据 getBoundingClientRect() 锁定宽度，然后等待一帧，然后通过过渡将其设置为零。总的来说，这是一个相当草率的问题。

标签： css sass hover css-transforms

【解决方案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>

【讨论】：