How to apply CSS changes in order?

Question

I sometimes come across cases where I want to apply several changes to the CSS in immediate succession, making sure that each one is registered by the renderer.

Here's a simplified example

The height of the element is auto, so it can't be transitioned from. So I'd want to set the elements height to the current computed height and then immediately change the class to start the transition. If that happens in the next line of code, the css-renderer doesn't have time to react to the first change and it is as if only the class was changed -> no transition.

var foo = $(".foo");
foo[0].addEventListener("click", function(ev){
  foo.css({"height":foo.height()+"px"});
  foo.addClass("active");
});  //this doesn't work, foo.css…' is ignored.

We can delay to the smallest animatable timestep with window.requestAnimationFrame(), however, due to browser differences these already need two nested calls to support Firefox.

var dan = $(".dan");
dan[0].addEventListener("click", function(ev){
  window.requestAnimationFrame(function(){
    dan.css({"height":dan.height()+"px"});
    window.requestAnimationFrame(function(){
      dan.addClass("active");
    });
  });
});  //this does work (afai can tell), but feels overdone with all that nesting.

Technically, this code works. I'm just wondering if this is really the best way to chain css changes like this or if there are other methods.

Answer 1

You can use setTimeout here to ensure that the class change always happens after the height of the div is computed.

Example:

var foo = document.getElementsByClassName('foo')[0];
var bar = document.getElementsByClassName('bar')[0];
var dan = document.getElementsByClassName('dan')[0];

function fooFunction(element) {
    element.style.height = element.clientHeight + 'px';

    setTimeout(function(){
        element.classList.add('active');
        element.removeAttribute('style');
    },10);

}

foo.addEventListener('click',function(){fooFunction(foo);},false);
bar.addEventListener('click',function(){fooFunction(bar);},false);
dan.addEventListener('click',function(){fooFunction(dan);},false);

.foo, .bar, .dan{
width:20%;
display: inline-block;
overflow: hidden;
vertical-align:top;
transition: height 1s ease-out;
}

.active {
height:50px;
}

.foo {
background:rgb(150, 100, 100);
}

.bar {
background:rgb(150, 150, 100);
}

.dan {
background:rgb(100, 150, 100);
}

<div class="foo">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

<div class="bar">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fourth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

<div class="dan">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fourth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fifth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>