iSharkFly-Docs
/
angular-docs-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
// #docregion query
query(':enter', [
style({ left: '-100%'})
style({ left: '-100%' })
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('300ms ease-out', style({ left: '100%'}))
animate('300ms ease-out', style({ left: '100%' }))
]),
query(':enter', [
animate('300ms ease-out', style({ left: '0%'}))
animate('300ms ease-out', style({ left: '0%' }))
])
]),
query(':enter', animateChild()),
@ -56,15 +56,15 @@ export const slideInAnimation =
})
]),
query(':enter', [
style({ left: '-100%'})
style({ left: '-100%' })
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('200ms ease-out', style({ left: '100%'}))
animate('200ms ease-out', style({ left: '100%' }))
]),
query(':enter', [
animate('300ms ease-out', style({ left: '0%'}))
animate('300ms ease-out', style({ left: '0%' }))
])
]),
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>
<!-- #docregion route-animations-outlet -->
<div [@routeAnimations]="prepareRoute(outlet)" >
<div [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<!-- #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:
* `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.
* Uses `group()` function to make the inner animations run in parallel.
* Within the `group()` function: