5 Angular Animations Examples - Learn BrowserAnimationsModule in Angular

in this video you will learn everything that you need to know regarding animations inside angular [Music] and before we start i must mention something super important if you are doing animations but you don't have something to do with javascript you don't work with javascript properties then please never ever use angular animations it doesn't make any sense css is much faster than javascript if you can implement something with just css animation go for it use angular animations only when you are dependent on some properties inside angular component with that being said let's jump inside angular animations and as you can see here i already generated an angular project with just a button and a text as you can see here is button fading out we can click on it and we see this block of text and this is just a button with click fade in out and here is in gif is shown and now inside our app component i have a shown property and we are toggling this property and the first step to start using angular animations is to inject a module inside our app module ts this is why let's jump inside of module ts and here inside imports we can write browser animations module and now here as you can see i get an auto import here on the top and it is browser animations module from angular platform browser animations and if you are curious what package is it inside your package json here you have angular animations package now let's jump back inside our component and actually what we want to do we want to add fade in and fade out effect on this text how we can do that first of all for this inside our component we must define a new property and it is called animations and it is an array and inside here i want to write just fade in property and now here on the top we can create fade in and actually here we want to write word trigger and it is auto import to trigger our animation and here first of all we must provide the name for example fade in with camel case and here we are providing a definitions and this is actually an array of our transitions that will happen when we are applying this trigger this is why here we can write for example enter transition and now here on the top we must create this end transition so what is this this is a transition and we can input it from angular animations now here as the first parameter we're providing a state call on enter and it means that we want to trigger this transition after entering and as a second parameter we have here an array with our steps and the steps will happen one by one and first of all here we must write style and we're setting here inside object whatever style we want to apply for example at the beginning we want to add opacity and it will be zero after style we want to apply animation this is why here we are writing animate and it is also auto inputted from animations and now inside first of all we want to provide a string which is the name of our animation for example one second is in and the second parameter here we're providing to what state we want to come and here we're providing style and inside our object we can write here opacity equals one which actually means this is how we create our animation first of all inside our animations we're providing fade in and actually fade in is a trigger so we're defining inside our animations an array of triggers inside trigger we first of all provide a name for example fade in and here is all our transitions as you can see this is an array so we can apply here several transitions and here we are defining our transition this is our name for example colon enter this is a predefined transition and this is what we want to happen these are our steps first of all we are setting ok by default this element has opacity 0 and here is what animation will happen and after this animation we will come to this styling now we can use our transition inside our html as you can see here we have diving gif is shown and after this we can write add fade in and what is this fade in this is exactly this trigger that we created which means this is this name let's check if it's working i'm reloading the page we don't have any errors because we injected our module i'm hitting now on the button and as you can see our text had that animation because here we added fade in on our div and this animation will be triggered and this is our enter transition and actually a lot of people write all this code just directly here inside animations but for beginners it's much easier to understand this code if we're splitting it in different properties here on the top now we want to do exactly the same but we want to implement our exit transition which means our element is already highlighted it is opacity 1 and we want to change it with animation to opacity 0. this is why here we can add one more animation and we can name it fade out and let's now create here const fade out and here we have our trigger and the name will be fade out and here we're providing an array with for example exit transition now let's create it here on the top and it will be super similar we have here transition and the name will be not enter but leave this is also predefined name and here we have an array first of all we are providing here our style and it will be inverted because at the beginning we have here opacity one after this style we want to apply an animation and here we are providing animate one second is out and the second parameter we are providing style what will happen and then and here we have our opacity which is zero so our animation is fully ready but we must bind it inside our html so here we can just write space fade out which actually means on this div we are applying to animations and i will reload the page here i am hitting we're getting fade in i'm hitting here again we're getting fade out we successfully implemented our animations now here is a super important point to remember what is this enter and leave and actually here inside of html we have ngif which means we render this element inside dom or we remove this element from the dom this is exactly this enter and leave and means that element appears in the dom and leaf means that we're removing an element from the dom now here i want to comment everything out because i want to show you something different we also don't need here animations and here inside our html i want to comment out this ing if shown and now fade in and fade out now here on the top i pasted exactly the same text like we had previously this is just a div but i didn't write here in gev and it is important so now i want to show you how we can define states inside our animations and let's say that we want to do exactly the same fade in fade out but just in a single animation with using states how we can do that first of all here we must provide an array of our animations and let's create an animation fade in out now here on the top i will name it version 2 so we know that this is the case with animations and here we want to create our fade in out and what is this this is a trigger we always start with the trigger and the name here will be fading out and here we're providing an array but what we want to create inside is not styles or animate we want to create states what are states these are predefined styles for some states that we can use this is where here we can write that we have a state and we're importing it from our animations and here first of all we must provide the name for example we have a state open and state close and here inside we are providing our styles so here we are using style object inside and we can write here opacity one just like we did previously which actually means we have this state open for our state when our element is shown this is not an animation this is just a state of our element now we can copy paste this state completely and rename it from open to close and now here our style will be opacity 0 which means now we created two states but we didn't create any animation for this we can create a transition this is why here we are writing word transition and just to remind you here on the top we just created exit transition as a transition and we put it inside our trigger and as you can see in our example here we put inside two states and now we're creating a transition and inside the transition first of all we're providing what we are doing and just to remind you here transition was enter and leave but here what we can do we can say from what state to what state we're making a change and here we can write open then bigger or equal and here we have closed and actually it means that we have a transition from open state to close state and now here we want to write inside array what we want to do and it will be just an animate and here we have one second is out which actually means this is exactly the same code that we have here on the top with the exit transition this is all the same we have here style opacity 1 animate and style opacity 0. what we have here we have open closed and open is opacity 1 closed is opacity 0 and here we are saying what animation will be happening which actually means this is a better way to write exactly the same code because it is more readable we are moving here our styles to the states and we are doing exactly the same now we mastered here another transition this is why i will copy paste here transition and right on the left closed and actually it's not closed it's close and on the right it will be open and now here we have an animate one second but node is out it will be ease in so here we're saying what should happen when we're coming from state close to state open and now here is a super important point before inside our html we just put here add and the name of our trigger for example fade in out but actually it won't work in our case because here we must provide inside what state we want to handle and actually what we want to write here no ngf just fading out and inside we're providing our ternary operator and here we can write that when property is shown isn't true then here we want to return a string open in other case we are returning string close which actually means here inside we are setting either open or close as a string why that because here inside a web component we have two states close and open and what we are doing here we are just changing the states of our animation let's check this out i'm reloading the page and we're getting a nice arrow assigning animation triggers via property expression attributes is invalid use property bindings instead and we must write here this square brackets which actually means here we're not writing fade out but we're writing square brackets like for the input let's check this out we're not getting any error i'm hitting here fade in and this text is faded in i'm hitting fade out and this text disappears which actually means we did exactly the same thing but we used here states another use case that you must know is usage of wild cards and actually we can just leave this example as it is but i want to show you how to apply to this logic wildcard what does it mean we have a wildcard star and it means any state which actually means here instead of open close we can write open star which actually means here we're not defining to what state we will come it means only that when we are changing the state from open to any other state we want to animate and exactly here instead of close we can write star to open state we want to animate and sometimes you really need wild cards if you have a lot of states let's check if it's still working i will reload the page but don't see our element fade in still works fade out still works by that here we actually don't say that we're coming to close state but we just come into some other state and all this code inside our html with open and close is still working this is why these styles are still there another important thing that you for sure want to do is knowing when your animation started and when your animation ended this is why here we have callbacks for our fading out here we can just write exactly the same square brackets fade in out dot and here we have first of all start and then done callback and actually here we can do some logic inside our component by understanding when our animation started or ended and here we can write for example on animation start and we're getting inside dollar event so our event of animation and now we can do exactly the same but here not start but done and here on animation done now we must jump to our ts file and create these two functions first of all i have here on animation start and here i am getting an event let's console log here our own animation start and our event and we want to do exactly the same with our end so here on animation done here is our event and here is console log on animation done let's check if it's working i'm reloading the page and we're getting an error property event does not exist on type app component and actually it might be tricky to debug for you because it is not that clear what is the problem and the problem is here that these are outputs which means here we must put round brackets and not square brackets in other case we are treating it as a property event inside our component and obviously it doesn't exist let's reload the page i'm getting here that we're getting parameter any implicitly has any type so let's write here that we have exactly any and we check what we are getting back let's reload the page but don't have any error and we already have here on animation start and dawn animation done and here i am hitting fade in again and we're getting first of all console log on animation styled and done animation done and we have here lots of important information like for example what element are we animating from what state we change something to what state how much time did we need for that and so on so it is really comfortable to use if you need to attach some logic to your animation and the last thing that i want to show you is one more state and what is voice stream and as you can see here i commented everything out and they have here just a div with fading out and in gef additional and now here what i want to do i want to comment everything out here on the top we don't need it again and we want to write once again this fading out so here we can create our fade in out and we know that this is a trigger so here is our trigger fading out and what we are providing inside an array of our transitions but first of all here i want to create a state with specific name and this name is called in and this is actually reserved state and this state means that this is a normal state in which your element will be and here we can provide a style where we have our opacity one because actually this is just a normal state of our element after this we can provide transitions just like we created them here on the top so here we have our transition and here i want to provide void arrow and here we have star what does it ever mean actually this transition is exactly the same like this transition enter that we rolled here on the top this is exactly the same and ant is just an alias to use in void and void means that the element didn't exist in dom and here star means that we don't care what state will be there it means we just want to apply a transition when the element appears and we really want this behavior often now here inside an array we can write first of all style and we have here our object with opacity 0 and after style we want to provide animate because here we want to provide animation but we don't need to provide style after because we have here style in this style will be exactly where we want to come so here we are saying that our element appears from nothing to any state and it is from opacity 0 with this animation to this state and we're doing exactly the same in reversed order here we have star and here we have void which means this element disappears and here we first of all write in our animate and after this we're writing our style with opacity 0. let's check if it's working i'm reloading the page but don't have any errors fading is still working fade out is working also and also if you're interested to learn how to speed up your angular application by using detect changes make sure to check this video

Channel: Monsterlessons Academy

Views: 33,535

Keywords: angular, angular animations, angular animations examples, browseranimationsmodule

Id: 8BatUQYtMlY

Length: 17min 55sec (1075 seconds)

Published: Thu Jun 09 2022