Css animation - setTimeout doesn't apply changes which breaks animation

Question

Here is the description of my goal:

1. I've got box with display: none
2. At some moment I need to display it with opacity animation.

Here my solution:
1. transition: opacity 0.5s ease-in-out;
2. On first step set display: block; opacity: 0 display: block; opacity: 0
3. On second step set display: block; opacity: 1 display: block; opacity: 1 , do it in setTimeout() to apply first step.

The problem is that first step applied only in some cases - sometimes it works / sometimes doesn't and browser just skips first step. I thought changing setTimeout to requestAnimationFrame should fix the problem but it doesn't - check my example

Why setTimeout / requestAnimationFrame does not force browser to apply first step? How to force browser to apply first step before applying second one?

Answer 1

Solution: http://jsfiddle.net/sxny7zs2/

.box{display:none} should be .box{display: block;}

When you set display:none you remove the object from the DOM almost entirely. By resetting to display:block you bring the object back fully and it begins to interact with other objects. The display feature is not meant for animations but for removing objects from interfering with others.

I suspect this is the villain:

$box.removeClass('is-animate-enter').addClass('is-animate-active');

By removing is-animate-enter class you trigger display:none; before you are able to add your next class. This means the object is unloaded from the view. Meanwhile when you do is-animate-active you instantly set display:block and opacity:1 . As far as the browser is concerned you are creating a new element, not modifying an old one here. As previously stated, when toggling the display you are actually loading and unloading an object so no animation is possible.

Maybe .switchClass() could fix this but I'm not sure, to reiterate the display command is for loading and unloading and not for animations.