Adding transition to sibiling of animated element in flexbox

ruth 0
Viewed 21

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/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>

css-transitions flexbox css html
1 Answers

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/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>

Nemanja29120
Related