Learn Angular Animations with 5 Examples

Key Takeaways

animation is often the x-factor that separates remarkable apps from ordinary apps in this episode I'm going to cover five different concepts related to angular animations including a few new concepts that were introduced in angular 4.2 angular animations are built on the web animations API which is very similar to css3 animations if you're not comfortable with animation at all I recommend doing some practice with css3 first and then you'll be able to make the most out of angular's animation module the first step to get started is to import the browser animation module into whatever module you plan on using animations in this first example I'm going to create a fade-in fade-out animation that will show some content in a popover when a button is clicked we import the methods we need from the animation module and then we'll create a boolean variable show that will determine the visibility of the popover I also create a getter called state name which will return the boolean variable as a string either show or hide which we need when defining the animation itself in the HTML we use animations by prefixing the animation name with the @ symbol and then pass at the current state of whatever variable we're going to animate in this case the only possible values will be show or hide and then we add a button for the user to toggle this variable the end result should look something like this it's just a simple div that fades in and fades out when that button is clicked every component has an animations property which accepts an array first we pass it a trigger which corresponds to the name with the @ symbol in the HTML then we define how each state should look once the animation is complete when that popover is being shown the opacity is 1 when it's hidden the opacity of 0 to actually make this animate we need to define a transition which sets the time parameter for the animation to occur in this case when we transition from show to hide it will animate in 600 milliseconds and ease out and then when we transition from hide to show it will transition in a thousand milliseconds or one second with an ease in and the end result is that simple fade in/fade out animation now we're going to build an animation that can handle multiple different states here we have a photo gallery component and we're going to represent its state with the position variable then we'll add a few buttons for the user to change the state on the front-end then we'll apply the photo State trigger to the image itself the goal is to have the user click these buttons and have the animation go from state to state seamlessly so again we start by defining the trigger and then we have three different states that we need to define the move state will move the image across the screen we do this by using the transform and translate X which means translate on the x axis if you've used css3 animations this should look very familiar to you you can adjust the position using both a percentage or pixel value to enlarge the image we'll use the transform scale which will increase the size the image by a factor of 1.5 to spin the image we'll use the transform rotate and this takes degrees as arguments and operates on all three axes so now we have four possible States including the default state and that gives us 16 possible combinations to animate it'd be very cumbersome to define each transition individually but angular offers a wild-card option which we can use to apply the transition to every different possible state so here we apply the wild-card is a 500 millisecond ease back in the app we can now see that each of these 16 combinations will use the 500 millisecond transition what if you wanted to control the intermediate steps in an animation you can do this with keyframes first make sure you import the keyframe this method into your component then we'll use the keyframes as an argument to the animate method inside the transition keyframes represent points and time relative to the length of the animation itself so in this example we have a $2,000 second transition so an offset of 0.33 would represent approximately 660 milliseconds in this example we're just translating and rotating the image all over the screen just to demonstrate how keyframes can create nonlinear animations back in the app we can see the image moves to the right and then up before reaching its final resting state another cool feature about angular animations is the ability to run callbacks when an animation is either started or finished in this example we're just going to console.log the animation and its current state animation callbacks are really similar to button clicks or any other user of that we simply called a photo state dot start and then fire whatever function we want to fire then back in the type script we just create a function that will handle the console login for us this is especially useful if you want to run a sequence of animations in a very choreographed kind of way the last animation feature I want to talk about is lists animations which uses two features that are new and angular 4.2 the new query method allows you to select elements that are nested within an animation based on their HTML tag in this case we'll use it to query all the images nested within an animation context once we've queried those images we can use stagger to create a delay between each animation of each image creating a shutter like effect we start by defining the trigger and then the transition we'll just use the wild-card then we can query every image that is nested within that trigger and first we'll get the images and translate them off the screen then we add an animation within the context of stagger which will stagger each item in the collection by 600 milliseconds in most cases you would make the stagger delay a little bit faster but I'll keep it slow for this example in the template we have the animation trigger to it div passing the length of the collection to it and then we loop over a collection of photos because these images are nested within the photos animation the query selector will automatically grab all the images and put them into an array back in the app we see that each image slicing the screen one after the other that's it for angular animation basics if this video helped you please like and subscribe and if you want to support the channel consider becoming a pro member at angular firebase comm you'll get access to a free copy of my book as well as free one on one project consulting thanks for watching and I'll see you soon [Music]