- Overview
- Transcript
How your app looks is as important as how it works, and animation is an important part of modern user interfaces. Whether by changing the color of an element to indicate that it has been selected or animating a spinner when data is being loaded, adding animation to your apps can add a professional touch.
In this Coffee Break Course, you will learn how to code animations for your Angular 2 components. Along the way, you'll learn a few ways to alter Angular 2 animations to make them even more engaging.
We've built comprehensive guides to help you learn JavaScript and Angular, whether you're just getting started or you want to explore more advanced topics.
1. How to Animate Your Angular 2 App
1.1 Introduction
[SOUND] An important part of developing a web app is the user interface. You could have the best app in the world, but if it's not attractive or comfortable to the user, it will be overlooked. One of the ways that you can make your app stand out is the inclusion of animations. These animations are subtle at best but they give your user interface a professional touch. Adding animations, changing your button color, or moving it to a different position when clicked are just a few examples of how you can add animations to your apps. In Angular 2 we have access to use animations in our components, but with everything you need to learn about the framework, you may not know where to begin configuring animations. In this coffee break course we will look at a sample project and learn how animation is added to your components. Using standard CSS transforms we will be able to animate the elements in our templates. Once you understand the basics, adding animations to your Angular 2 projects will be simple. Check out the Angular 2 animations course on Tuts+
