diff --git a/aio/content/examples/animations/src/app/open-close.component.1.html b/aio/content/examples/animations/src/app/open-close.component.1.html index 4edd5000fa..1ef8dfc604 100644 --- a/aio/content/examples/animations/src/app/open-close.component.1.html +++ b/aio/content/examples/animations/src/app/open-close.component.1.html @@ -1,10 +1,10 @@ + -

The box is now {{ isOpen ? 'Open' : 'Closed' }}!

- + diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index ae1e359630..401892699c 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -73,6 +73,17 @@ In HTML, these attributes are set using ordinary CSS styles such as color and op open and closed states +
+ + Let's create a new `open-close` component to animate with simple transitions. + + Run the following command in terminal to generate the component: + + `ng g component open-close` + + This will create the component at `src/app/open-close.component.ts`. +
+ ### Animation state and styles Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function. @@ -192,7 +203,7 @@ The animation is executed or triggered when the expression value changes to a ne The following code snippet binds the trigger to the value of the `isOpen` property. +region="trigger"> In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation.