Transition Property

JavaScript
1

Hi, I need some help in CSS. I’ve a div , I want to add transition to this div such that each time it’s height changes , It should change smoothly . I added transition: 2s height; to my div . And When I change the height of div it’s not changing smoothly .

here is my code …

2

Couple of things:

If you want to animate the height of .acc__content, you have to give the transition property to that element, not to the .acc container.

Secondly, you can only transition between two numerical values, but height: auto is no numerical value. You have to put something like 100px there.

3

But then it will lose responsiveness

4

I tried giving transition property to that element also , but it’s still not working.

Edit: Yes it got animated changing the height to 100px. But How can I do it with auto height?

5

You can’t do this with auto height, which (I know) is a bit annoying if you want to code your own accordion where the height of the elements is different for each, and also changes with viewport size.

Here’s a (very long) thread on Stack Overflow about this problem, with various solution of various quality.

To sum up a few:

use jQuery library and its .slideUp and .slideDown methods

(importing a whole library only for one effect feels a little over-kill though)

instead of height, animate max-height:

.acc__content {
  max-height: 0;
  overflow: hidden;
  padding-left : 0.5rem;
  transition: 2s ease-in-out max-height;
}

.open {
  max-height: 200px; /* this needs to be higher than the height it could possibly have */
}

The downside is that the speed of the animation will now vary for elements of different sizes. The more the actual height differs from the value you’ve specified in the .open class, the faster the animation will become.

instead of height, use transform:scale:

.acc__content {
  transform: scaleY(0);
  transform-origin: top;
  overflow: hidden;
  padding-left : 0.5rem;
  transition: 1s ease-in-out transform;
}

.open {
  transform:scaleY(1)
}

The downside here is that your content will look squished while it’s expanding.

use JavaScript to read the height value (probably the best method):

CSS (you don’t need the .open class anymore):

.acc__content {
  height:0;
  overflow: hidden;
  padding-left : 0.5rem;
  transition: 2s ease-in-out height;
}

JS (use the scrollHeight property to read the actual height of the element):

for (let i = 0; i < headingEle.length; i++) {
    headingEle[i].addEventListener('click', function (e) {
        
        let clickedEle = e.target;
        let content = clickedEle.nextElementSibling; 
      
        // use the class only to determine whether the content is currently open
        if (content.classList.contains('open')){
          content.classList.remove('open')
          content.style.height = 0;
        } else {
          content.classList.add('open')
          content.style.height = content.scrollHeight + 'px'; 
        }
    });
}

The last method using JS would be the best in my opinion for this use case, but you can experiment with all of them to see what works best for you.

1 Like
6

Thank you so much . I got to know about new thing of JS scrollHeight :slight_smile: .
Finally got the animation as I wanted !

7

scrollHeight was new to me too, I often ran into situations where I wanted to animate the (unknown) height of an element so that’s good to know.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.