CSS transition with max-height overflow hidden "simulate" transition

Question

I'm using the technique of transitioning the max-height instead of the height because of varying content height but I have a problem.

Inside the element that grows or shrinks I have an absolute positioned element that overflows, and I want to show that element when the parent element is expanded.

The problem is that if I only set the overflow hidden when the element is not expanded, it jumps because of the transition. Here's a pen where you can see it jump:

https://codepen.io/nicopavlotsky/pen/pozLBxY

with this code:

div{
  transition: all .5s;
  overflow: hidden;
}

div.active{
  overflow: visible;
  max-height: 10rem;
}

and here's another one where it doesn't have the jump but the children element is cut out:

https://codepen.io/nicopavlotsky/pen/yLBKrGW

div{
  transition: all .5s;
  overflow: hidden;
}

div.active{
  max-height: 10rem;
}

is there a JS less way to do this?

Michael M. · Accepted Answer · 2023-01-01 18:18:25Z

1

An alternative approach that may provide the desired result would be to transform: scaleY() as follows.

div {
   transform-origin: top;
   transform: scaleY(0);
}

div.active {
   transform: scaleY(1);
}

Here's an example:

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('div').classList.toggle('active');
});

div {
  width: 200px;
  border: 2px solid red;
  transform-origin: top;
  transform: scaleY(0);
  transition: all .5s;
  position: relative;
}

div.active {
  transform: scaleY(1);
}

span {
  display: block;
  position: absolute;
  bottom: 3rem;
  right: -1rem;
  width: 2rem;
  border: 2px solid blue;
  height: 2rem;
}

<button>Toggle</button>
<div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. At porro veniam a iste deleniti possimus aliquam minima libero est blanditiis eligendi aut, eaque, quam sunt ducimus amet qui, quo aperiam!
  </p>
  <span></span>
</div>

edited Jan 1, 2023 at 18:18

Michael M.

11.2k11 gold badges22 silver badges46 bronze badges

answered Sep 10, 2019 at 21:05

H K

1,26210 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nick Over a year ago

Thanks for the idea, I ended up using a wrapper div with more width (100% + 3rem with margin-left: -1.5rem) so it has space for the overflow item to show.

Collectives™ on Stack Overflow

CSS transition with max-height overflow hidden "simulate" transition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related