Animated Container

If we add some styling to our app, we can see that the default behavior of our animated-if component is a little surprising.

Ember Animated is fading our long paragraph in and out, but the parent div (our styled card) is just flickering between its new height and old height.

This is a good illustration of what kinds of primitives Ember Animated ships with. They're lower-level than those you might be familiar with from Liquid Fire. Our usage of animated-if here is not enough to get the job done on its own. But Ember Animated provides many primitives that we can use in concert together, ultimately giving us much more flexible and robust animations for any situation we can throw at it.

In our case, teaching our parent <div> to make room for the animation would be hard to do on our own. Fortunately, Ember Animated provides another component for just this situation: <AnimatedContainer>.

Let's wrap our animated-if block in a container:

+ <AnimatedContainer>
    {{#animated-if isShowing use=this.transition}}
      <p>In the projection of traditional celluloid films, a rotating shutter causes intervals of darkness as each frame, in turn, is moved into position to be projected, but the viewer does not notice the interruptions because of an effect known as persistence of vision, whereby the eye retains a visual image for a fraction of a second after its source disappears. The perception of motion is due to a psychological effect called the phi phenomenon.</p>
    {{/animated-if}}
+ </AnimatedContainer>

If we save and look at work, we'll see now that our box is smoothly animating its height as the new content fades in and out.

Looking great!

Now before we leave, we can see there's one more issue with our animation as it currently stands. It's hard to see at the current speed, but we can change the duration of our animated-if transition by passing in a duration argument:

- {{#animated-if isShowing use=this.transition}}
+ {{#animated-if isShowing use=this.transition duration=2000}}
    <p>In the projection of traditional celluloid films, a rotating shutter causes intervals of darkness as each frame, in turn, is moved into position to be projected, but the viewer does not notice the interruptions because of an effect known as persistence of vision, whereby the eye retains a visual image for a fraction of a second after its source disappears. The perception of motion is due to a psychological effect called the phi phenomenon.</p>
  {{/animated-if}}

If we trigger the animation now, we'll see that our new text actually overhangs from its parent box. Even though the box is smoothly transitioning its height, the text doesn't respect the box's boundaries.

We'll tackle why in the next video.

Let's recap what we've learned so far.

We've used the animated-if component along with the fade transition to add a simple animation to our paragraph of text.

animated-if is one of many animators that Ember Animated makes available to us. Animators are components that animate their children, and all the animators share common APIs and behaviors. If we look at the docs, we'll see other animators like animated-each and animated-value. We'll be covering these other animators and their common behaviors throughout the rest of this series.

We also looked at AnimatedContainer, and saw how it can "make room" for an animator as it executes its transition. You can wrap any animator inside of an AnimatedContainer and get this same behavior.

You'll find that you'll do this often as you add animators to your app's pages.

View the full diff on GitHub.