Angular Animations Tutorial | Mosh

[Music] animations are getting more common in a lot of modern applications so in this section I'm going to teach you how to add animations to your angular apps by the end of this section you will have a good understanding of the structure of animations you'll be able to animate various elements in the Dom you'll be able to create reusable animations you will learn how to work with the new animation functions in angular 4.3 and finally I will show you how to write clean and maintainable animation code this section is about one and a half hours long so it's best to watch it over two sessions now let's get started alright first let me show you the kind of animations you're going to build in this section so here's one example here we have this to do list when i refresh the page these items these elements are going to appear with an animation so let's have a look one by one I'm going to refresh the page let's have a closer look so our heading slides down let's have a look refresh slide down one more time slide down right now our items they appear with a fade in effect so have a look here refresh see one more time nice now also note that these items they don't appear all together at the same time they appear one after another so you have the first item then the second item then the third item let's have a look refresh did you see one more time this is what we call a staggering effect like a curtain also if I add a new item here here is my new task again it appears with a fade in effect and look what happens when I click an item to remove it the background turns red then the item slides to the right for a fraction of second and then it quickly slides to the left of the screen let's have a look did you see so here's one example so I'm gonna comment out but to do the element and bring in the zipi by the way I have attached this project as a zip file so if you want to play with it download it and run it you can see all these animations on your machine as well but we're going to build all these step-by-step in this section so don't worry if you don't understand the code now let's take a look at this zipping so this is our zippy now I'm going to click this this zippy is going to expand with an animation and then the content will fade in have a look did you see it's a very nice animation so these are the two examples we'll be working on in this section but the principles you learn here you can apply them to build various kinds of animations there are two primary ways to create animations in web applications we can use CSS and JavaScript in CSS we have a couple of properties like transition and animation and with these properties we can animate Dom elements so here's an example I've defined a CSS class called stretch in this class we have two properties animation name and animation duration when we apply this class to a Dom element the browser will animate that element okay now if you have been working with CSS for a while chances are you have heard of a library called animate at CSS so if you go to google and search for animate that CSS alright look at this first link here so this is a library that gives us a bunch of predefined classes for various kinds of animations so we don't have to manually build these animations with CSS properties so here's an example from this drop-down list you can select an animation and then see that animation in action see that's the bouncing effect okay now here's another example you've got pulse so very simple and beautiful animation you can look at the github page it's very easy to use all you have to do is install this animated CSS via NPM then add it to your HTML files or in angular world you need to import it into Styles dot CSS just like how we imported bootstrap into our styles but CSS okay and then finally all you have to do is to apply these classes on your elements it's really easy to use I'm not gonna go over this more because our focus here is purely on angular and not CSS so as you saw we can certainly use CSS to create animations but this CSS animations give us limited control so we often use these for simple one-shot animations like showing a tooltip or toggling UI element States if you want to build something more complex that needs fine-tuned control then you really need to use JavaScript now in terms of the implementation there are various libraries out there that give you an API for implementing animations in JavaScript I personally have used jQuery before but there are many other libraries out there but the recommended approach is to use the web animations API which is basically a specification for animating Dom elements and it's currently supported natively in Chrome Firefox and opera so if you head over to can I use com on this page you can see what features are implemented in what browsers so let's search for web animations API now here you can see web animations API is widely supported in Firefox Chrome and opera Microsoft Internet Explorer and edge just like always are behind the game but don't worry because there are polyfills that you can install and then you can use web animations in these other browsers now what does our code look like here's an example so we get a reference to a Dom element and then we can call the animate method on that element as simple as that so there are basically two ways to create animations in web applications you can use CSS and/or JavaScript but where does angular come in this picture well angular has a module called angular animations and this module is built on top of the standard web animations API so instead of us directly working with this API we're going to work with the abstractions provided by angular the benefit is that our code is going to be easier to unit test and also easier to port to a different platform so when we code against these abstractions and potentially we can take our code and run it inside an iOS or an Android environment and use animations natively in that environment so we are not tightly coupled to the implementation of web animations in browsers next we're going to look at animations in angular in more detail so in the last lecture you learned about two ways to create animations now let's see how we can build animations in our angular apps so as I told you before in angular we have a module called angular slash animations in this module we have a bunch of helper functions for creating animations such as trigger transition state animate and so on before we explore these functions in detail let's take a look at the anatomy of an animation look at this illustration what you see here is the concept behind every animation whether you're a programmer or an animator you're dealing with the same concept so what does this mean this means an element or here more accurately a Dom element can be in any given state let's say state 1 in this state it has a certain look and feel perhaps it's background is blue now during an animation it transitions to a different state and in this state it has a different look perhaps its background is now yellow this is the anatomy of every animation we have various states in each state our element has a different look and during an animation it transitions from one state to another okay now what are these states well in angular we have three kinds of states we have the Void state the default state and custom States let's explore each of these the Void state represents the state of an element that is not part of the dom and this can happen when an element is created but not placed in the dom yet or when it's removed from the dom here's a real-world example think of it to-do lists every time we add an item in the list the corresponding element is first created but it's not in the Dom yet so it's in the void State then it transitions from this state into a new state similarly when we delete an item from the list the corresponding element transitions from its current state into the void stay so here this asterisk represents what we call the default state so all elements do have a default state now back to the list of states one more time we have three types of states the void state the default state which is indicated by an asterisk and also custom states we don't always use custom States because they only make sense in certain scenarios for example think of a zippy or an accordion component this component is always visible in the view but its state can change from collapsed to expand it so if you want to implement an animation during this transition then we'll have to work with two custom states here collapsed and expand it so this is a big picture now let's take a look at the implementation let's say we want to apply an animation to each to the item in a list we start with the components metadata here we have a property called animation which takes an array in this array we register one or more triggers each trigger has a name and an implementation in this implementation we define all the states and transitions for that kind of animation so these functions you see here like trigger state and transition these are the helper functions that are defined in angular slash animations module you're going to see this in action soon so here we have a trigger called fainting now we can apply this trigger on any Dom element using this notation so we use an @ sign followed by the trigger name so this is the big picture next we'll create our first animation all right you're ready to implement our first animation now if you want to code along with me which I highly recommend you to do so download the zip file I've attached to this lecture then just as usual run npm install and finally ng sir so in this application we have a simple to-do list we can add a new to the item and we can delete existing items by clicking them now currently we don't have any animation here and that's what we're going to implement over the next few lectures so I can be s code the first step is to import the animations module into an app module so let's go to app that module on the top I'm gonna import browser animations module from at angular slash platform - browser slash animations so this module includes all the code or running animations in a browser now we need to import this into our module so browser animations module as I told you before this browser animations module is implemented on top of the standard web animations API and this API is natively supported in Firefox Chrome and opera so to support the other browsers you need to add polyfills polyfill is basically code that allows you to use modern JavaScript features in older browsers so back here in the source folder you can see we have a typescript file called polyfills now if you scroll down on line 40 and 41 you can see a commented line for importing web animations polyfill so here we need to remove the comment and as we can see in the comment in front of this line you need to manually install this node module web - animations that's j/s so back in the terminal npm install web - animations - je s and remember the save flag so this is how we add animation support to an existing application first we import the browser animations module and then we add web animations polyfill to support older browsers next we're going to implement our first animation all right let's go to our to do this component so to those dot TS so here we have a basic to those component now in the component metadata we're going to add a new property animations and we set this to an array in this array we define one or more triggers so we call the trigger function which comes in angular slash animations library let's import this on the top and by the way look here we have a couple of options one is to import this from angular slash animations the other is to import it from angular slash core initially the animation functions were part of the core angular module but starting from version four or four point one I don't exactly remember angular team moved these functions into a different module called angular slash animations so be sure to import all these functions from angular such animations okay now here we need to give this trigger and name so let's call this fate and then as a second argument we need to pass an array in this array we register all the states and the transitions to implement this animation okay so we have a trigger called fade before going any further let's go to our template and apply this trigger so to those that HTML so this is where we render all the to-do items each to-do item is a button and here you can see I've applied that into for directive so I'm gonna apply our trigger using this notation at sign and then the name of the trigger fade okay if you don't do this you're not gonna see the animation okay so back in the component now here in disarray we need to register all the states and the transitions for this animation so we often have calls to two functions one is the state function and the other is transition again both these functions are defined in angular slash animations so let's quickly import them from angular slash animations now it's easier to start with this transition function so I'm going to temporarily delete this line and we'll come back to it later now this transition function requires two arguments the first one is a string and this is what we call a state change expression with this expression we define the source and the target States so here's an example void goes to default that means when our element goes from the void state to the default state then here we add an array and in this array we define the steps that should run during this animation okay so in order to implement a fading effect we want to apply certain Styles during this transition when the element is created but it's not placed in the Dom yet here often we have calls to two functions one is the style function and the other is the animate function what are these well first of all let's import both of this from angular slash animations okay starting with the style function this function takes an object and this object contains one or more key value pairs where keys are CSS properties so if I want to change the background color of this element during this transition I can say that here background color yellow I can also set the opacity here opacity zero so this style function will apply these styles here immediately during this transition okay now the animate function is similar but it takes two arguments the first argument is the timing so let's say 2000 milliseconds and the second argument is the style object so I'm gonna apply two stars background color white and opacity one so this animate function will apply these Styles over this period of time in this case two seconds that's the only difference between the style and animate functions the style function applies the Styles immediately but the animate function applies them over a period of time so when we run this code the background color of our element is going to be initially yellow and then over two seconds it will gradually change to white also similarly their opacity will be initially zero and then it will gradually change to one let's see this in action save back in the browser refresh okay look our items initially had a yellow background but that changed to white over two seconds now back to our component let's make this code a little bit cleaner here on line 12 where we call the animate function we can totally delete the second argument we don't need to explicitly tell angular to change the background color to white and the opacity to 1 because angular is smart enough to know that in the target state which is the default state here our item should have a white background and their opacity should be 1 so we don't need to explicitly specify them here so let's delete the call to the style function okay that's cleaner so here's the lesson in the list of steps and a transition if you have a call to the animate function with only a timing value without any Styles this animate function is going to undo all the previous Styles applied over this period of time so because earlier we changed style of our to two items this animate function is going to make any necessary changes to undo these styles okay also for the fade effect we don't really need this background color I just added this as a demonstration so here's how we implement the fade in effect when an element transitions from the void state to the default state initially we want to set its opacity to zero which will make this element invisible and then over a period of time in this case two seconds we want to change that opacity to 1 which will make the element appear on the view so here on this page if you add a new item it will appear with a fading effect so a new item there you go however if we click an item it will disappear immediately there is no animation let's have a look see they disappear immediately so let me show you how to implement a fade out effect here back to our component in the animations metadata property we defined a trigger called fade in this trigger we have a transition from the voice state to the default state now we want to define another transition from the default state to the void state because when we click an item it's going to be removed from the Dom at this point it will go from the default state to the Void state so here I'm gonna define a second transition transition from the default state to the voice state and here are the steps during this transition we want to change the opacity of this element from 1 to 0 over a period of time and this will make the element fade out so because we want to change the style over a period of time we're going to call the animate function so animate we give it a timing value let's say 2000 milliseconds and then we set the style so you want to change the opacity to zero over two seconds that's all we have to do let's test this back in the browser I'm gonna click this item now it fades out here's another example beautiful so this is our implementation of the fade in and fade out effects in this implementation as you see we have something that is duplicated that is this style object here how can we make this code cleaner well if you pay close attention here this is the style of the element in the void State so when the element is out of the Dom its opacity should be zero so to clean up this code we can define this style for the void state so earlier I told you that here in the trigger we often have calls to the transition and/or state functions so here we can call the state function to define a state state the first parameter is the name so here we want to work with the void state now look at the second parameter the type of this parameter is animation style metadata this might sound a little bit confusing and in fact a lot of functions in the animations module their parameters look something like this so they always have animation bla bla bla metadata now here's a tip for you whenever you see types like that drop the animation and metadata words so here if we drop these what do we have style that means we should call this style function to get a style object okay so recall style and here we can set this to I love this element in the void State so opacity 0 and then we don't have to repeat this in two places so we can delete it from here and also here so once again inside a trigger we often have calls to the state and/or transition functions most of the time we use the transition function but depending on what we're implementing you may use the state function to make our code cleaner and more maintainable now one last thing before we finish this lecture on angular website when you search for animation functions you will see two versions of these functions so here's an example let's say you want to read about this style function let's search okay look here we have two instances let's click on the first one you can see this function is defined in angular slash core package so as I told you before initially all the animation functions were defined in this package but starting from angular 4 or 4.1 angular team move these functions into a separate package however for compatibility they have kept these functions in the angular / core package but they will be deprecated soon so now right here let's click on the second one you can see this function is defined in an angular slash animations package and it has the full documentation so continuing from the last lecture we still have a little bit of duplication in our code so look we have repeated this animate 2,000 milliseconds in two places so let me show you a cleaner way to implement the fade in and fade out effect in the transition function as the first argument we can supply multiple state change expressions so here I can add a comma and add the other state change expression that is the default state goes to void and then we can delete the second transition better right but we can make this even cleaner so instead of having two unidirectional state change expressions we can have a bi-directional state change expression so I can delete the second expression and make this bi-directional this is much better from where we started so here is the lesson if you have multiple transitions and these transitions have the same implementation you can refactor them into one transition with multiple state change expressions also here we have a couple of aliases so let me revert this back to what we had earlier these two expressions are very common so in angular we have an alias for these expressions so for the first one when the element transitions from the void to the default state our alias is in turn so we add : enter and for the second expression our alias is leave so that's when the element is leaving the Dom like this so using these aliases in my opinion is cleaner and more readable than a bi-directional state change expression like this but if you prefer the other syntax at all means go for it I'm going to delete this so this is all about transitions so we have defined this fate trigger in art to do is component a chances are somewhere else in an application you may want to apply a fade effect to another element we don't want to repeat all this code so it's better to extract this code and put it into a different module that we can reuse in multiple places so back in the app folder I'm gonna add a new file animations dot TS in this file we're going to define our reusable animations if you have a lot of animations instead of one file you may want to create a directory and in that directory you will have different files for different kinds of animations but for this example that's an overkill so acting our component this trigger is basically a function that is defined in angular slash animations module so if you look at the return type it returns an animation trigger metadata object once again as a tip I told you whenever you see these types drop the word animation and metadata so this trigger function returns a trigger object all we have to do is export a trigger object from our animations module so I'm gonna select all this code cut it back to the new module export a variable let's call this fade and set it to the return value of this trigger function now let's clean up the code finally we need to import all these functions from angular special animations package so back to our component on the top I'm gonna cut this line and move it to this new module beautiful now we can reuse this fade trigger in multiple places so back to our component here in this array I'm gonna add the fade trigger so fade and you can see this is defined in animations module all right now it's time for an exercise so I want you to implement a slide animation like this if i refresh this page look elements slide on the left side of the screen one more time that's it if I add a new item here publish a new section look it slides from the left to the right and when we click an item it slides to the left side of the screen and exits now here's a tip for you in order to implement this slide animation you need to apply the transform CSS property when you said this to translate X can move an item to the left or to the right side of the screen next we can see my solution hi thank you for watching my angular tutorial if you enjoyed this video please like it and share it with others also you can subscribe to my channel for free new videos every week this video is part of my complete angular course with almost 30 hours of high quality content where you learn everything about angular from the basic to the advanced topics all in one course so you don't have to jump from one tutorial to another in case you're interested you can get this course but a big discount using the link in the video description and if not that's perfectly fine continue watching as the next section is coming up

Channel: Programming with Mosh

Views: 105,696

Rating: 4.9360166 out of 5

Keywords: angular, angular.js, angularjs, angular2, angular 2, angular 4, angular4, mosh hamedani, animations, angular animations, angular animations 2, angular 2 animations, programming with mosh, code with mosh, angular animation

Id: ra5qNKNc95U

Length: 32min 58sec (1978 seconds)

Published: Wed Sep 06 2017