Example: Button State Change Animation
Learn how to combine CSS transitions with Angular's features to create a button state change animation.
Scenario
Let’s create another button animation, but this time, the transition will be applied when the button’s state changes from its default clickable state to a disabled state.
This will be a slightly different approach from the previous examples in this chapter because this involves adding and removing a class to modify the style of the button and therefore, howthe transition is triggered. We’ll use Angular’s class binding to conditionally add the disabled class.
Note: We’ll create the animation in this lesson within a single component in the Angular application. We’ll use
app.component.html
,app.component.scss
, andapp.component.ts
for the template, stylesheet, and any TypeScript-related logic, respectively.
Let’s take a look at how this works. In the code snippet below, the class
disabled
(the word following class.
enclosed in square brackets) will be added if isDisabled
is truthy and removed if it’s falsy (line 5).
Get hands-on with 1200+ tech skills courses.