Adding transition to sibiling of animated element in flexbox-CodePudding

I wish to reveal the button label on hovering over the button container smoothly.

I have a flexbox container with two elements, namely icon and label. The width property of the label is animated from 0 -> 100% over hover on the container. The issue is I'm unable to add a transition to the icon to move it smoothly when the label's width is adjusted. And so the icon's animation looks snappy.

In the below example, hovering over the icon reveals it's label. But the icon themselves don't transition smoothly, rather they snap to places. Adding transition: all 0.2s; to icon doesn't seem to have any effect.

Could someone please say what I'm missing here? Or is there a better way to implement this? TIA.

* {
  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/[email protected]/primeflex.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
  <div >
    <div >
      Article Title
    </div>
    <div >
      <div >
        <i ></i>
        <div >
          <span>Add details</span>
        </div>
      </div>
      <div >
        <i ></i>
        <div >
          <span>Download article</span>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

The problem is because you mix % with other units. It isn't possible to do that. You set 0 widths for --label and on hover to change to % so the result is like that. You don't set any unit for 0, yes, but it means you use some fixed unit.

If you change to some fixed unit it will work.

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

Update

* {
  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/[email protected]/primeflex.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
  <div >
    <div >
      Article Title
    </div>
    <div >
      <div >
        <i ></i>
        <div >
          <span>Add details</span>
        </div>
      </div>
      <div >
        <i ></i>
        <div >
          <span>Download article</span>
        </div>
      </div>
    </div>
  </div>
</div>