Hierarchical Routing Animations in Angular

hi my name is Steven Lewin and I want to share a little bit about animating route changes within an angular application animations with an angular have a lot of different powers and different capabilities they're really awesome at the way they take a state that exists within your application and then convert that into visual information that helps your users understand what's going on within the application one of the really cool things that recently became available is the ability to animate across different routes of my application so that as a user is navigating within my application I can reflect those navigation changes by animations that show the user leaving one page and entering another so let's go ahead and take a look at a existing angular application that I've built so this is fluent I hope this is a blog application that I've built entirely in angular so this was built using the CLI it looks a lot like most angular applications you've got different components that are loaded using the router so for example when I click on a piece of content here such as this blog post that content is going to load and render by a different URL and a different component so as I move back and forth everything is loading instantly but I think we can make this a little bit better by adding animations that reflect the hierarchy of the application in order to indicate meaning as I'm moving about the application so let's dive into the code so in this application we have a lot of normal things that you're going to be using themes we've got an app component we've got a CSS file we've got a set of different routes corresponding to that app and so we're really going to follow a a small three-step process first we're gonna dive into the CSS to make sure that we're able to show two routes simultaneously in a way that we would expect then we're going to go ahead and save all of our route data so we're going to add this additional layer of information about the routes that exist in our application giving us basically the depth that every route exists at so that we know how we want to animate that and transition that and then lastly we'll go ahead and create the animation itself so let's get started so as we can see here in my app components HTML file in the template we can see we've got a router outlet and I've already got a div that's wrapping around this outer outlet router outlet so what I'm going to do is because I want to style all of the components that this router outlet is loading I'm going to actually need to create a class on the parent we need to do this because components that are loaded into an application and you're next to a router outlet don't actually go inside of the router outlet as I said they go next to it and so what I'm going to do is I'm going to say class equals route container and this will give us the ability to style both this box as well as all of the components that get loaded into it as the transitions are happening and as components are being loaded so they're entering the scene as well as when they're leaving the scene so let's go ahead and use this style and now look for our router outlet and right next to that I'm going to say we're out container we're going to do two things first we're going to go ahead and position this relative what this will allow us to do is is allow us to take all of the children elements and position them absolute and we'll know that they are going to be absolutely positioned according to the relative parent that they've got and then the next thing I want to do is I want to take all of these components that get loaded into this so any sub child of this of the routes container we're going to go ahead and display that block so by default and your components are display:inline but we want to change that over to blocks so that when we give it a size and width and shape and things like that those stick differently than they would if it was just in line so once we've got these two styles now we can go ahead and start adding the metadata to our routes that allow us to understand where they're on the hierarchy that'll then later be use as part of these state transitions this should look relatively familiar you've got things like my home component being done at the empty path and we've got specific blog posts that I can view so what I'm going to do is I'm going to add to the existing data that's already here so I set up a couple title attributes that are just custom that I came up with that allow you to understand what the title the page should be and now we're going to go ahead and add a couple T's we're going to add a depth of one here we're going to add a of to here now this will be used by the application in order to understand the state of the app based on the current route that's been loaded into the router outlet I'm going to start doing this right inside of our template here and so I'm going to use our property binding syntax with this special angular animation syntax so you're going to see this at fine I'm going to say route animation and so this is not a directive or property of a div this is just going to be the way that we invoke and name an animation that we're gonna be triggering and then the expression here is actually the state that the animation is checking for those transitions and so the state that we want here from our expression is going to be the depths of the current page now there's no actual way to get this and so what I'm going to do is create a method called get depth and I'm going to use the router outlet itself in order to get that depth and in order to use the router outlet itself I'm going to create a local template variable called my list and I'm going to give it access to the outlet so now that we've got this get def method and I'm passing in the outlet let's go ahead and define that give depth method so I'm going to jump into the Associated app component here and what I'm going to do is I'm going to define you Matt it's called get depth I'm just going to take this router outlet that we're passing in and here I'm going to go ahead and use that router outlet look at its properties and figure out what data attribute exists on it and then return that so I'm going to say return outlet dot activated route data and then I'm going to say depth which is the property that we came up with it we names we added in the route now I'm just going to go ahead and return that so that our animation has a set of states now that we've got those states and if I save this this should rerun there by the language services so that we know that we've got that method right great now I'm actually to go ahead and define the animation within my app component and so the way we do this is we add an animation to our component and in order to do this successfully we're actually going to need a few additional imports here so I'm going to import all these methods that I'm going to be using from the animations library so this is going to do things like trigger transition Rufe query style and animates we're going to get all these from at and your flash animations alright so let's go ahead and descend into the hierarchy that is the configuration used in the animations so the first thing that we're going to be doing is we're going to be triggering animations for a specific component for a specific element on our page that we're doing this animation on and so we came up with the name of our animation so I'm going to say trigger based on route animation and then what I'm going to do is I'm going to pass it in as an array that's what this array is going to contain is all of the transitions that exist and that should be activated upon changes to the state of that router animation so we're going to create a couple transitions here but we'll just start with one and so what I would say is when I move from depth one so that's two so our state one to state two I'm going to go ahead and do all the things in this array and there's going to be four things in this array we're going to have a style two queries and then we're going to have a group of animation so the style on the two queries basically get us set up for the initial state of animation and then our group will do two animations at the same time so the first style element set is I'm going to set the height of the component so if you remember we're animating on the div here the route container and so when I say style height is equal to exclamation point here what that means is let's go ahead and at the beginning of the animation set the height of the element equal to the height that it would be at the end of the animation next what I'm going to go ahead and do is I'm going to say query and what I'm going to query for is the enter element so this is one of the cool new features of angular animations that allows you to actually take not just the element that you're animating but also children and you can do additional things with them and that's something we rely on heavily here and what I'm going to do for the enter element is I'm going to apply a style what I'm going to do is say at the beginning of the animation I want to transform this and I'm going to translate its exposition to 100% and so what this will should do for me is it will take instead of placing the route directly on the page I'm actually going to have it a little bit offset so that it's going to animate into the page so that we know that it's visually entering the scene and it's giving me the information now that I want the only other thing that I need to do in my second query here I'm going to take both my enter and my leaves routes I'm going to go ahead and apply an initial style that allows us to position these things exactly as we want to and so I'm going to make it position:absolute and then I'm going to make the top position zero I'm going to make it the left position 0 right 0 just so that it takes up the full page and everything cascades appropriately and now we actually want to do now that we set this data up for the initial animation now we want to actually define what the animation does so I'm going to make it groups that I can do two animations at the same time the two things I'm going to give it are I'm going to take the item that is relieving the scene so this is the component that was previously the one that the user navigated to and I'm going to say let's animate and I'm going to say let's give it zero point three seconds to animate and let's use a cubic Bezier curve and I'll just use some pre-configured numbers here 0.25 and one so what this will do is we'll give it a little bit more natural curve as it's accelerating out of the scene and then I'm going to apply this animation here and I'm gonna ply a style and that style is going to be a transform where the item that is leaving I want to take it where it started at zero the default and I'm going to move it to negative 100 so I'm going to move it kind of off of the seam here so I'm going to say translate X property and I'm going negative 100 percent and then we make sure we close all these things appropriately and now we're going to want to do a very similar thing for the item that is entering right I'm going to make it a bracket there I'm let's just go ahead and copy pretty much everything here but instead of the item that is entering being translated to negative 100 I'm going to translate it from the hundred that it started at now a minute slowly over 0.3 seconds animates into the initial position so we've got the animation or the trigger that tells us which piece were actually animating I've got the transition that identifies the two states I'm moving between I'm setting up the initial style of the parent element I'm setting up the initial position of the enter element and I'm positioning everything position:absolute so that I can take complete control where they are on the page and then I'm going to use slowly animate over 0.3 seconds both to leave item leaving and the enter item entering the scene alright so now let's flip over to our application and see if this worked we have our blog here I'm going to go ahead and click on one of the blog posts from the home screen great we saw the original piece of content slide out and we saw the new piece of content slide in what happens if we go back nothing because we don't have a route defined or a transition to find from state 2 to state 1 so let's go ahead and copy everything we just did here and take our transition from 1 to 2 I now say from 2 to 1 and then instead of going off to 100 we're going to say negative 100 and then here we're going to just flip these numbers so this one's going to go positive and the entering is going to end up at 0 high so let's go ahead and take a look and see if that added the corresponding animation when you now leave so when I click into a piece of content the piece of content floats in and then when I return using either the back button or navigation both are equivalent from the routing perspective we see the piece of content slide back in so we have this very nice kind of back-and-forth that really corresponds with the content to tell the user where am I within the application so now we've set up a hierarchy within our application we've added some animations that give the user this nice visual reflection of what's going on with the application we're finished with our hierarchal replication thanks so much we'll see you the next one

Channel: Digital Fluency

Views: 37,406

Keywords: angular, demo, animations, howto

Id: yPKSpuso6K0

Length: 12min 29sec (749 seconds)

Published: Wed Jul 12 2017