Lesson Outline

Animating with Angular

Angular provides its own animations library that we can use to implement animations in our application. When using the Angular animations library, we will be defining animations in the @Component metadata:

@Component({
	selector: 'app-home',
	templateUrl: 'home.page.html',
	styleUrls: ['home.page.scss'],
	animations: [
		/* animations go here */
	]
})

We will get to how we can use the Angular animations library specifically in a moment, but first, we are going to take a look at what using the Web Animations API without Angular looks like.

Here is a brief overview of the pros and cons of using the Angular animations library for creating animations.

Pros:

• Organised and modular way to define animations
• Easier to integrate with application logic
• Animations tied to state

Cons:

• Requires set up
• Bigger learning curve

I will preface this lesson by saying that I rarely use the Angular animations library. Since the Ionic Animations API was released I have used that for most of my animations that integrate with application logic in some way. I find the Ionic Animations API to be more intuitive and easier to work with. However, there is nothing wrong with using the Angular animations library - if this style makes sense to you, and you like it, you should use it. One key aspect of Angular animations that I do like is how animations are associated with particular states that you can switch between.

Using Angular Animations

Although it may seem a little confusing at first, using the Angular animations library makes it a lot easier to integrate animations into our applications logic rather than having to implement the handling ourselves.

We are going to discuss how the Angular animations library works and how to set it up in a moment, but for some context, let's take a look at an example:

@Component({
	selector: 'app-home',
	templateUrl: 'home.page.html',
	styleUrls: ['home.page.scss'],
	animations: [
		trigger('badgeState', [
			state('idle', style({
				opacity: '0.3',
				transform: 'scale(1)'
			})),
			state('adding', style({
				opacity: '1',
				transform: 'scale(1.3)'
			})),
			transition('idle <=> adding', animate('300ms linear'))
		])
	]
})

<ion-badge [@badgeState]="someClassMember">0</ion-badge>

The purpose of this animation is to define two states for a badge element, and each of those states has different styles. When it is in the adding state the badge should have full opacity and it should be made 1.3x bigger. When switching between these states, the transition should be animated. It looks pretty intimidating, but that's mostly because we're dealing with some peculiar syntax. When you break it down it isn't too complicated.

Angular animations are made up of triggers, states, styles, and transitions. A trigger contains multiple states, a state defines a set of styles, and each state can transition to another state.

We can attach our triggers to a specific element, like this:

<ion-badge [@badgeState]="someClassMember">0</ion-badge>

Which will apply the animation to that element. We associate the trigger with a binding that will determine the state (this would allow us to set the state as either the string idle or the string adding as we please). The element will be given the style of whatever state that binding evaluates to be. If that state changes, for example from idle to adding, then the transition will be used to determine how the element should be animated from one state to another.