CODEWITHSUNDEEP
htmlcssanimation
Kapcash
Kapcash

Reputation: 6909

transition on element resizing when displaying a child element

I'm trying to animate a component auto resizing when displaying a child element.

I display / hide a child element when focusing the parent div. This div automatically resizes but I would like to make it smooth. Is it possible with pure CSS3?

I already tried several things : transition on width / visibility, overflow-x: hidden, calc()... I can't find a working solution for the moment. I don't want to use jquery like method ($.hide() or something)...

Here is an example of what I want to animate:

  .chip {
    display: inline-block;
    position: relative;
    color: #747474;
    line-height: 32px;
    padding: 0 12px;
    background-color: #e4e4e4;
    border-radius: 5px;
}

.chip > i {
  display: none;
}

.chip:hover > i{
  display: inline-block;
  cursor: pointer;
}
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<div class="chip">
    Animation
    <i class="fa fa-times"></i>
</div>

Upvotes: 1

Views: 1359

Answers (1)

Akshay
Akshay

Reputation: 14348

Since you can't animate the display property, you can use max-width and transition to achieve the effect. opacity was given to add a fade effect

.chip {
    display: inline-block;
    position: relative;
    color: #747474;
    line-height: 32px;
    padding: 0 12px;
    background-color: #e4e4e4;
    border-radius: 5px;
    vertical-align:middle;
}

.chip > i {
  display:inline-block;
  max-width:0em;
  opacity:0;
  transition:max-width .5s,opacity .5s;
  overflow:hidden;
  vertical-align:middle;
}

.chip:hover > i{
  max-width:2em;
  opacity:1;
}
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<div class="chip">
    Animation
    <i class="fa fa-times"></i>
</div>

You can also use other properties like transform to achieve more beautiful animations.

.chip {
  display: inline-block;
  position: relative;
  color: #747474;
  line-height: 32px;
  padding: 0 12px;
  background-color: #e4e4e4;
  border-radius: 5px;
  vertical-align: middle;
}

.chip>i {
  display: inline-block;
  max-width: 0em;
  opacity: 0;
  transition: max-width .5s, opacity .5s,transform .5s;
  overflow: hidden;
  vertical-align: middle;
  transform:scale(0,0) rotate(-90deg); 
}

.chip:hover>i {
  max-width: 1em;
  opacity: 1;
  transform:scale(1,1) rotate(0deg); 
}
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet" />
<div class="chip">
  Animation
  <i class="fa fa-times"></i>
</div>

Upvotes: 4

Related Questions