如何使用变换对高度和宽度进行动画处理？

Question

我正在尝试构建一个搜索栏，如果您将鼠标悬停在搜索图标上，它应该会展开。但直接对宽度进行动画处理并不高效，因此我决定使用变换，但它无法正确缩放搜索栏。这是屏幕截图。

使用正常宽度 图像时

使用变换 图像时

CSS代码：

.searchBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8px;
}

.search-content {
  font-size: 10px;
}

.search-input {
  width: 0px;
  background-color: transparent;
  padding: 0.5rem;
  padding-right: 2rem;
  border-radius: 2rem;
  border: none;
  outline: none;
  transition: 0.2s;
}

.searchBox:hover > .search-input {
  /* width: 8rem; */
  transition: scaleX(8rem);
  padding: 0.5rem;
  padding-right: 2rem; 
  background-color: rgb(240, 245, 248);
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}

.searchSvg {
  position: absolute;
  right: 0.62rem;
  transition: 0.3s;
  display: grid;
  place-items: center;
}

这是codesandbox的链接

Answer 1

transform: scaleX(8rem)不起作用，您应该将其更改为不带任何单位的普通数字。

另外，我认为您不应该使用transform: scale()on，input因为它会使文本被拉伸。

在这种情况下，width我认为使用悬停效果属性并不会真正影响整体性能。