CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 1999

CSS wait till parent transition is finished then instantly transition child

I have a situation like the following

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;
  
  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: blue;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

I need have the child stay at the same width until the parent is completed its transition.

I know that this is possible with absolute styles. See the snippet below:

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;

  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 200px;
  height: 100%;
  background-color: blue;
}

.parent:hover .child {
  width: 300px;
  
  transition-delay: 0.25s;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

The current element that I need this for is has relative styles (100%) so the snippet above wouldn't work in my case. Is there a way to change the snippet above to work with relative styles or is there another way to do this?

Upvotes: 0

Views: 798

Answers (2)

Evochrome
Evochrome

Reputation: 1215

It is actually possible with only CSS, although this is a bit of a dirty method. If you change the font-size to some number [px|em|etc.] instead of the width property, this will enable the size of both to change "independently".

The drawback of this method is that you will need to add another child element (or ::before | ::after) with a more reasonable font-size if you want to display some text inside these elements, so it might be better for your purpose to use some JS like @jmc but if you can't (or don't want to :p) this might be the solution for you.

.parent {
  font-size: 200px;
  width: 1em;
  height: 100px;
  padding: 25px;
  background-color: grey;
  
  transition: width 0.25s;
}

.parent:hover {
  font-size: 300px;
}

.child {
  width: 1em;
  height: 100%;
  background-color: blue;
  
  transition: width 0.25s;
}

.child:hover, .parent:hover > .child {
  transition: width 0.25s 0.25s linear;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Upvotes: 1

jmc
jmc

Reputation: 670

Just add same transition to child class. Take A look below:

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;

  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 200px;
  height: 100%;
  background-color: blue;
  transition: width 0.25s;
}

.parent:hover .child {
  width: 300px;
  
  transition-delay: 0.25s;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

If you have to say that .child will have the width of 100%, so it will really have follow the width of its parent no matter what width it is. To make it have a delay transition, the .child should have a starting width then. But if you have to insist on having the child a 100% width, is it possible if you can use JS/JQuery? If that so, check the snippet I have below:

$(document).ready(function() {
  var width = $('.child').width();
  
  $('.child').css({
    'width': width
  });
  
  $('.parent').hover(function() {
    setTimeout(function() {
      $('.child').css({
        'width': 'calc(100%)'
      })
    }, 500)
  }, function() {
    $('.child').css({
      'width': width
    });
  });
});
.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;
  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: .2s width 0.25s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Upvotes: 0

Related Questions