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

docs(animations): Added consistency in code examples (#37081) 

PR Close #37081
This commit is contained in:
Advaith3600 2020-07-09 10:55:29 +05:30 committed by atscott
parent 209a365511
commit c40cbecdd1
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
aio/content/examples/animations/src/app/animations.ts
View File

@ -32,15 +32,15 @@ export const slideInAnimation =
// #enddocregion style-view // #enddocregion style-view
// #docregion query // #docregion query
query(':enter', [ query(':enter', [
style({ left: '-100%'}) style({ left: '-100%' })
]), ]),
query(':leave', animateChild()), query(':leave', animateChild()),
group([ group([
query(':leave', [ query(':leave', [
animate('300ms ease-out', style({ left: '100%'})) animate('300ms ease-out', style({ left: '100%' }))
]), ]),
query(':enter', [ query(':enter', [
animate('300ms ease-out', style({ left: '0%'})) animate('300ms ease-out', style({ left: '0%' }))
]) ])
]), ]),
query(':enter', animateChild()), query(':enter', animateChild()),
@ -56,15 +56,15 @@ export const slideInAnimation =
}) })
]), ]),
query(':enter', [ query(':enter', [
style({ left: '-100%'}) style({ left: '-100%' })
]), ]),
query(':leave', animateChild()), query(':leave', animateChild()),
group([ group([
query(':leave', [ query(':leave', [
animate('200ms ease-out', style({ left: '100%'})) animate('200ms ease-out', style({ left: '100%' }))
]), ]),
query(':enter', [ query(':enter', [
animate('300ms ease-out', style({ left: '0%'})) animate('300ms ease-out', style({ left: '0%' }))
]) ])
]), ]),
query(':enter', animateChild()), query(':enter', animateChild()),

2
aio/content/examples/animations/src/app/app.component.html
View File

@ -17,7 +17,7 @@ Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (cl
</nav> </nav>
<!-- #docregion route-animations-outlet --> <!-- #docregion route-animations-outlet -->
<div [@routeAnimations]="prepareRoute(outlet)" > <div [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet> <router-outlet #outlet="outlet"></router-outlet>
</div> </div>
<!-- #enddocregion route-animations-outlet --> <!-- #enddocregion route-animations-outlet -->

2
aio/content/guide/route-animations.md
View File

@ -111,7 +111,7 @@ Let's assume that we are routing from the *Home => About*.
The animation code does the following after styling the views: The animation code does the following after styling the views:
* `query(':enter style({ left: '-100%'})` matches the view that is added and hides the newly added view by positioning it to the far left. * `query(':enter', style({ left: '-100%' }))` matches the view that is added and hides the newly added view by positioning it to the far left.
* Calls `animateChild()` on the view that is leaving, to run its child animations. * Calls `animateChild()` on the view that is leaving, to run its child animations.
* Uses `group()` function to make the inner animations run in parallel. * Uses `group()` function to make the inner animations run in parallel.
* Within the `group()` function: * Within the `group()` function: