How Liquid-Fire Fade Slide Fade Animation works

howliquidfireanimationworks.md

How Liquid Fire FSF Animation Works

Each helper produces two wrapping div elements to aid in the animation:

• liquid-container
• liquid-child

The liquid-container introduces relative positioning for the children, and also handles the resizing height/width with slide animation. The liquid-child contains the actual content, and is the element that will be faded / unfaded. The 'old-child' will be completely replaced with a 'new-child' after the animation has completed.

These elements have their own base css styles:

.liquid-container {
    position: relative;
    overflow: hidden;

    /* without this, overflow:hidden won't take effect because the things
       we're trying to hide are on a separate accelerated
       context. Also, this prevents a tiny vertical jump when the
       content switches to accelerated.  */
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.liquid-child {
    overflow: hidden; /* Prevent margin collapse */
}

Step - by - step how it works

1. The new liquid-child + subsequent DOM is added to the liquid-container. This initially has properties:

   • visibility: hidden
   • position: absolute
   • top: 0, left: 0
   • height, width (as per a calculation)

2. The same above properties are set on the old liquid-child, with the following differences:

   • visibility: visible;
   • opacity: 1

3. Liquid-container gains a 'liquid-animating' class. Width and height attributes are set. Height or width animates to match the measured height of the new liquid-child.

4. At the same time, the old liquid-child's opacity animates from 1 to 0, and finally visibilty is set to hidden.

5. Immediately following, the new liquid-child's opacity animates from 0 to 1, and finally visibility is set to visible.

6. Old liquid-child DOM elment is removed, and inline styles are removed from the liquid container.