Spencer Watson

Ember Liquid Fire and CSS Transitions


Recently at work, I rebuilt an existing app in Ember-CLI. The app had a lot of animation between pages, so I took this opportunity to introduce myself to Liquid Fire. I found documentation a bit lacking and it took me a little while to wrap my head around it. My goal was to use Liquid Fire just as a way of enabling me to use CSS transitions to transition between routes.

The way the Liquid Fire helps is that it allows for two routes to be rendered at the same time while the transition is happening. You can create a app/transitions.js file as a map for what transitions use what animation. The file should look something like this:

In this example, I am declaring that any time I transition to the Home route, I will use a custom transition called "toHome." This custom transition is saved in app/transitions as to-home.js.

The application that I was building has a background component that is added to the application route. This component contains some SVG elements that get animated during the transition. Each route also has some UI Elements that slide in and out during the transition. In this case, there were two states: Internal and Home. When I am on an internal page, my background SVGs are in one position. When I am on the home page, they are at another position. So, to make this happen, I have a toHome transition that looks something like this:

{gist | https://gist.github.com/WattyRev/e52a89ae818b4b8c4d1c}

In this example you can see that when I transition to the home route, I am removing the open class from the old route (I'll cover that more in a moment) so that the route content itself transitions away. It also removes the "internal" class from the #background element and adds the class "atIndex." This is how my background area starts transitioning. I know that my transitions are going to take about 1 second, so I return a promise that is resolved after 1 second. Once that promise is resolved, Liquid Fire will remove the old route.

Each route also has an activation process to apply it's loading animation. Here is an example from the index.js route file:

{gist | https://gist.github.com/WattyRev/3624c15ffe6ea2efb9b2}

This example adds the 'open' class to the route container, and adds the 'atIndex' class to the background. I do this here instead of in the transition file so that these transition animations will fire on page reload as well as page transition.

The CSS provides the meat for the transitions, as it should in my opinion. I manage these animations in a couple areas. One, as we mentioned, is the background. In my CSS, I have styles for three background states: #background, #background.atIndex, and #background.internal. Whatever contents of the background get changed between these states just need to be set with the "transition" css property.

Each route has two states including: .liquid-child and .liquid-child.open. The first state contains the styles for when the route is closed, while the open class does the opposite. We can make the animation by transitioning between the two.

I should also make note that in order for this to all work, you have to replace your {{outlet}} with {{liquid-outlet}}. This is what enables liquid fire to take control of the transitions.

Your message has been sent!