Angular 2 (Angular 4) - Route Specific Animation
Angular 2 (Angular 4) - Route Specific Animation
In this video we continue with the shaking login form example, and we look to provide animation that translates each component in a set of routes. When we leave one route and start another we will slide in the out the previous screen and bring the form to 0 opacity, and then subsequently bring in the next component that we are routing to in using a slide in transition and setting the opacity back to 1.
As part of this example I also show parallel animations using groups to demonstrate how we can set the opacity faster than the translation etc.
Below is the git repository for the final result shown in this video. You need to check out the routing branch though.
https://github.com/lyraddigital/shaki...
For any questions regarding this tutorial, the git repositories or anything else, do not hesitate to contact me here on YouTube, or you can also email me at [email protected].
You can follow me on twitter at: / dduckmanton82
You can also follow my business account at: / lyraddigital
You can also follow my business account on Facebook at: / lyraddigital
I publish an article every now and then on LinkedIn as well. So connect with me on LinkedIn at: / daryl-duckmanton-4478a14a
Watch all my other videos in this series:-
Part 1 - Introduction and the CLI: • Angular 2 (Angular 4) - Introduction ...
Part 2 - Angular Module Basics: • Angular 2 (Angular 4) - Angular Modul...
Part 3 - Multiple Angular Modules: • Angular 2 (Angular 4) - Multiple Ang...
Part 4 - Shared Angular Modules: • Angular 2 (Angular 4) - Shared Angul...
Part 5 - Eagerly and Lazily Loading Modules: • Angular 2 (Angular 4) - Eagerly and ...
Part 6 - Basic App Component and Presentation: • Angular 2 (Angular 4) - Basic App Co...
Part 7 - App Component bindings: • Angular 2 (Angular 4) - Component bin...
Part 8 - Attribute binding and the main navigation: • Angular 2 (Angular 4) - Attribute bin...
Part 9 - Basic Form and Dual Binding: • Angular 2 (Angular 4) - Two Way Binding
Part 10 - Registration Form Part 1: • Angular 2 (Angular 4) - Creating Forms
Part 11 - Registration Form Part 2: • Angular 2 (Angular 4) - Dynamic Form...
Part 12 - Registration Form Part 3: • Angular 2 (Angular 4) - Form Validation
Part 13 - Registration Form Part 4: • Angular 2 (Angular 4) - Form Validati...
Part 14- Registration Form Part 5: • Angular 2 (Angular 4) - Reactive Forms
Part 15 - Structural Directives: • Angular 2 (Angular 4) - Structural Di...
Part 16 - Dynamic Forms: • Angular Dynamic Forms (Angular 7) pre...
Part 17 - Lifecycle Hooks Part 1: • Angular 2 (Angular 4) - Lifecycle Hoo...
Part 18 - Lifecycle Hooks Part 2: • Angular 2 (Angular 4) - Lifecycle Hoo...
Part 19 - Lifecycle Hooks Part 3: • Angular 2 (Angular 4) - Lifecycle Hoo...
Part 19.5 - Lifecycle Hooks Part 3 Cont: • Angular 2 (Angular 4) - Lifecycle Hooks
Part 20 - Lifecycle Hooks Part 4: • Video
Part 21 - Services and Promises: • Angular 2 (Angular 4) - Services and ...
Part 22 - HttpClient and the In Memory Web API: • Angular 2 (Angular 4) - Http Client a...
Part 23 - A Node Webserver API: • Angular 2 (Angular 4) - A Node Webser...
Part 24 - Observables and rxJS: • Angular 2 (Angular 4) - Observables a...
Part 25 - Hot and Cold Streams with RxJS: • Angular 2 (Angular 4) - Hot and Cold ...
Part 26 - Observable methods part 1: • Angular 2 (Angular 4) - Observable me...
Part 27 - Observable methods part 2: • Angular 2 (Angular 4) - Observable me...
Part 28 - Observable methods part 3: • Angular 2 (Angular 4) - Observable me...
Part 29 - Observable methods part 4: • Angular 2 (Angular 4) - Observable me...
Part 30 - Observable methods part 5: • Angular 2 (Angular 4) - Observable me...
Part 31 - Attribute Directives: • Angular 2 (Angular 4) - Observable me...
Part 32 - Directive Lifecycle Hooks: • Angular 2 (Angular 4) - Directive Lif...
Part 33 - Built In Pipes: • Angular 2 (Angular 4) - Built In Pipes
Part 34 - Creating a Custom Pipe: • Angular 2 (Angular 4) - Creating a Cu...
Part 35 - Pure vs Impure Pipes: • Angular 2 (Angular 4) - Pure vs Impu...
Part 36 - Animation with States and Triggers: • Angular 2 (Angular 4) - Animation wi...
Part 37 - Animation with Transitions: • Angular 2 (Angular 4) - Animation wi...
Part 38 - Animation and Keyframes: • Angular 2 (Angular 4) - Animation and...
