在柔性箱中添加动画元素的过渡

Question

我希望在按钮容器上平稳地显示按钮标签。

我有一个包含两个元素的柔性盒容器，即图标和标签。标签的宽度属性是从容器上悬停的0 -> 100%动画开始的。问题是，当标签的宽度被调整时，我无法添加到图标的转换以平稳地移动它。所以图标的动画看起来很流畅。

在下面的例子中，悬停在图标上会显示它的标签。但是图标本身并没有顺利的过渡，相反，它们很快就到达了各个地方。将transition: all 0.2s;添加到图标似乎没有任何效果。

有人能告诉我我在这里错过了什么吗？还是有更好的方法来实现这一点？蒂娅。

​

* {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.tile {
  margin: 2rem;
  height: 100%;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 30rem;
}

.header-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 0;
  flex-wrap: wrap;
}

.title-wrapper {
  display: inline-flex;
}

.title-wrapper.title {
  margin: 0 0.25rem;
  font-weight: 600;
}

.header-button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.header-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #50585c;
  fill: #50585c;
  background-color: transparent;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  margin: 0;
  border: none;
  border-radius: 0.4rem;
  outline: none;
  cursor: pointer;
  overflow: hidden;
}

.header-button--icon {
  padding: 0;
  margin: 0;
  width: 1em;
  font-size: 1.2em;
  font-weight: 600;
}

.header-button--label {
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: width 0.2s ease-out, margin 0.2s ease-out;
  margin: 0;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.header-button:hover {
  background-color: #f6f7f7;
}

.header-button:hover > [class$='--label'] {
  margin: 0 0 0 0.4em;
  width: 100%;
}

.header-button:active {
  color: #2c3133;
  background-color: #c5cacc;
  box-shadow: 0px 4px 10px rgb(0 0 0 / 3%), 0px 0px 2px rgb(0 0 0 / 6%),
    0px 2px 6px rgb(0 0 0 / 12%);
}

<link href="https://cdn.jsdelivr.net/npm/primeflex@3.2.1/primeflex.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/primeicons@5.0.0/primeicons.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">

<div class="tile shadow-2">
  <div class="header-wrapper">
    <div class="title-wrapper title">
      Article Title
    </div>
    <div class="header-button-container">
      <div class="header-button">
        <i class="pi pi-plus-circle header-button--icon"></i>
        <div class="header-button--label">
          <span>Add details</span>
        </div>
      </div>
      <div class="header-button">
        <i class="pi pi-download header-button--icon"></i>
        <div class="header-button--label">
          <span>Download article</span>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

问题是你把%和其他单位混在一起。这样做是不可能的。您将0宽度设置为-label并在悬停时更改为%，因此结果如下所示。你不把任何单位设置为0，是的，但这意味着你使用一些固定的单位。

如果你改变到某个固定的单位，它将工作。

.header-button:hover > [class$='--label'] {
  margin: 0 0 0 0.4em;
  width: 125px;
}\

更新

​

* {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.tile {
  margin: 2rem;
  height: 100%;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 30rem;
}

.header-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 0;
  flex-wrap: wrap;
}

.title-wrapper {
  display: inline-flex;
}

.title-wrapper.title {
  margin: 0 0.25rem;
  font-weight: 600;
}

.header-button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.header-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #50585c;
  fill: #50585c;
  background-color: transparent;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  margin: 0;
  border: none;
  border-radius: 0.4rem;
  outline: none;
  cursor: pointer;
  overflow: hidden;
}

.header-button--icon {
  padding: 0;
  margin: 0;
  width: 1em;
  font-size: 1.2em;
  font-weight: 600;
}

.header-button--label {
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: 1s ease-out;
    margin: 0 0 0 0.4em;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
   max-width: 0;
}

.header-button:hover {
  background-color: #f6f7f7;
}

.header-button:hover > [class$='--label'] {
  max-width: 350px;
}

.header-button:active {
  color: #2c3133;
  background-color: #c5cacc;
  box-shadow: 0px 4px 10px rgb(0 0 0 / 3%), 0px 0px 2px rgb(0 0 0 / 6%),
    0px 2px 6px rgb(0 0 0 / 12%);
}

<link href="https://cdn.jsdelivr.net/npm/primeflex@3.2.1/primeflex.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/primeicons@5.0.0/primeicons.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">

<div class="tile shadow-2">
  <div class="header-wrapper">
    <div class="title-wrapper title">
      Article Title
    </div>
    <div class="header-button-container">
      <div class="header-button">
        <i class="pi pi-plus-circle header-button--icon"></i>
        <div class="header-button--label">
          <span>Add details</span>
        </div>
      </div>
      <div class="header-button">
        <i class="pi pi-download header-button--icon"></i>
        <div class="header-button--label">
          <span>Download article</span>
        </div>
      </div>
    </div>
  </div>
</div>

​