Animating Max-Height with Pure Js

Pure JavaScript - Timed Animation - Consistent height?

The harcoded 5 that you are using for the height increment doesn't allow the animation to complete the entire final height (200) in the time that you are setting (500ms), you need to calculate the height increment based on the final height, the animation time and the interval to make it consistent:

(function () {
'use strict';

var animator = {};

animator.endHeight = 200; //The end height
animator.interval = null; //Create a variable to hold our interval
animator.speed = 500; //500ms
animator.startHeight = 0; //The start height
animator.interval = 16;

animator.animate = function (el) {
    var self = this,
    startTime = Date.now(); //Get the start time
    //calculating height variation
    self.deltaHeight = (animator.endHeight / animator.speed) * animator.interval;
    this.intervalId = setInterval(function () {
        var elapsed = Date.now() - startTime, //Work out the elapsed time
            maxHeight = self.maxHeight; //Cache the max height 

        //If the elapsed time is less than the speed (500ms)
        if (elapsed < self.speed) {
            console.log('Still in the timeframe');

            //If the client height is less than the max height (200px)
            if (el.clientHeight < self.endHeight) {
                self.startHeight = self.startHeight + self.deltaHeight; //Adjust the height
                el.style.height = self.startHeight + 'px'; //Animate the height
            }
        } else {
            console.log('Stop and clear the interval');
            el.style.height = self.endHeight + 'px';
            clearInterval(self.intervalId);
        }
    },  animator.interval); //60FPS
};

animator.animate(document.getElementById('box'));
}());

how to make my transitions for max-height work synchronously?

interestingly, you've stumbled on a deceptively difficult problem in pure CSS.
The truth is, your paragraphs are already behaving as you want them to, the problem is that you've specified a large max height relative to the actual content of the p, it gives the impression that they are executed one after the other, but that's just because the time it takes is relatively (compared to actual height of p with overflow: hidden) long to grow/shrink max-height to 500px. It's as if you have an invisible box growing to 500px.
This should be easily solvable by changing your max-height to auto, but unfortunately you cannot animate height auto in pure CSS transitions. your options are:

a) choose a different hardcoded max-height which is closer to the actual content size.

b) use transform scale(Y)

c) use pure JS: for example slideUp and slideDown

var Headers = $('.header') 
var dropDownParagraphs = $('.dropDown p') 

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
    // theP.addClass("active");
  // dropDownParagraphs.not(theP).removeClass("active");
  dropDownParagraphs.not(theP).slideUp(200);
  theP.slideDown(200);

});

check this codepen for implementation of c)
https://codepen.io/bakuthe3rd/pen/abvzVJz

Animating max-height with CSS transitions

In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {    max-height: 0;    transition: max-height 0.15s ease-out;    overflow: hidden;    background: #d5d5d5;}
#menu:hover #list {    max-height: 500px;    transition: max-height 0.25s ease-in;}

<div id="menu">    <a>hover me</a>    <ul id="list">        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>    </ul></div>

In jQuery, how do I animate the max-height CSS property?

OK, so there is no way to do what I wanted... So I've had to make my own function to have generic "animation" function (from x to y in d milliseconds).

I wrote a blog post describing how I did it here: Generic "Animate" function with jQuery

I included a demo of what it can do as well. The demo link is at the bottom of the article, or for the impatient, you can just click here.

CSS height animation on element with dynamic height

Remove the height: 200px;, so you have both animate for expand and collapse.

Also, use the following to add animate on new line:

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* your line height here */
  }
}
div[contenteditable] > div {
  animation-duration: 0.3s;
  animation-name: lineInserted;
  transition: height 0.3s;
}

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('.text').classList.toggle('max');
});

.text {
  background: green;
  color: #fff;
  transition: all .3s ease-in-out;
  min-height: 20px;
  max-height: 90vh;
  overflow: auto;
}

.max {
  transition: all .3s ease-in-out;
  min-height:90vh;
}

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* your line height here */
  }
}
div[contenteditable] > div {
  animation-duration: 0.3s;
  animation-name: lineInserted;
  transition: height 0.3s;
}

<div class="text" contentEditable="true"></div>
<button id="button">Click</button>

---

Related Topics