Triggers, states, and state transitions

Each Angular animation is encoded with a functional programming style, as a tree of function calls. The root function is always trigger, whose first argument is the name of the animation: trigger('myAnimation', [...]). The definition of the animation is contained in an array passed as the second argument. Once defined, the animation is applied to the HTML tag of the element to animate with this syntax: [@myAnimation]='<binding expression>'. All possible values returned by the expression define the animation states. For instance, an animation applied to a button might have two states identified by the strings 'opened' and 'closed', or by the true and false Boolean values of a closed property.

Get Hands-On TypeScript for C# and .NET Core Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.