honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: updated animation docs intro section and example (#42046) 

This commit updates the animation docs and provides better clarity for open-close component with it also added click event in open-close.component

Closes #39708

PR Close #42046
This commit is contained in:
iRealNirmal 2021-05-11 19:35:57 +05:30 committed by Zach Arend
parent 34cd4dc852
commit 03825cfab6
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/examples/animations/src/app/open-close.component.1.html
View File

@ -1,10 +1,10 @@
<!-- #docplaster --> <!-- #docplaster -->
<!-- #docregion trigger -->
<nav> <nav>
<button (click)="toggle()">Toggle Open/Close</button> <button (click)="toggle()">Toggle Open/Close</button>
</nav> </nav>
<!-- #docregion compare, trigger -->
<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container"> <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
<p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p> <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div> </div>
<!-- #enddocregion compare, trigger --> <!-- #enddocregion trigger -->

13
aio/content/guide/animations.md
View File

@ -73,6 +73,17 @@ In HTML, these attributes are set using ordinary CSS styles such as color and op
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states"> <img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
</div> </div>
<div class="alert is-helpful">
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`.
</div>
### Animation state and styles ### 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. 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. The following code snippet binds the trigger to the value of the `isOpen` property.
<code-example path="animations/src/app/open-close.component.1.html" header="src/app/open-close.component.html" <code-example path="animations/src/app/open-close.component.1.html" header="src/app/open-close.component.html"
region="compare"> region="trigger">
</code-example> </code-example>
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. 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.