docs(animations): copy edits (#3300)
This commit is contained in:
Kapunahele Wong
Jules Kremer
parent
a237911e7a
commit
7e1ca5083c
|
|
@ -51,14 +51,14 @@ figure
|
|||
Animations are defined inside `@Component` metadata. Before you can add animations, you need
|
||||
to import a few animation-specific functions:
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports', 'hero-list-basic.component.ts')(format=".")
|
||||
|
||||
:marked
|
||||
With these, you can define an *animation trigger* called `heroState` in the component
|
||||
metadata. It uses animations to transition between two states: `active` and `inactive`. When a
|
||||
hero is active, the element appears in a slightly larger size and lighter color.
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'animationdef')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'animationdef', 'hero-list-basic.component.ts (@Component excerpt)')(format=".")
|
||||
|
||||
.alert.is-helpful
|
||||
:marked
|
||||
|
|
@ -69,7 +69,7 @@ figure
|
|||
Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
|
||||
one or more elements in the component's template.
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'template')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'template', 'hero-list-basic.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
|
||||
|
|
@ -79,7 +79,7 @@ figure
|
|||
With this setup, an animated transition appears whenever a hero object changes state.
|
||||
Here's the full component implementation:
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts')
|
||||
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', '', 'hero-list-basic.component.ts')
|
||||
|
||||
:marked
|
||||
## States and transitions
|
||||
|
|
@ -163,7 +163,7 @@ figure.image-display
|
|||
|
||||
## Example: Entering and leaving
|
||||
figure
|
||||
img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;" )
|
||||
img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;")
|
||||
:marked
|
||||
Using the `void` and `*` states you can define transitions that animate the
|
||||
entering and leaving of elements:
|
||||
|
|
@ -171,7 +171,9 @@ figure
|
|||
* Enter: `void => *`
|
||||
* Leave: `* => void`
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-enter-leave.component.ts', 'animationdef')(format=".")
|
||||
For example, in the `animations` !{_array} below there are two transitions that use
|
||||
the `void => *` and `* => void` syntax to animate the element in and out of the view.
|
||||
+makeExample('animations/ts/src/app/hero-list-enter-leave.component.ts', 'animationdef', 'hero-list-enter-leave.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
Note that in this case the styles are applied to the void state directly in the
|
||||
|
|
@ -207,7 +209,7 @@ figure.image-display
|
|||
img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400")
|
||||
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-enter-leave-states.component.ts', 'animationdef')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-enter-leave-states.component.ts', 'animationdef', 'hero-list-enter-leave.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
## Animatable properties and units
|
||||
|
|
@ -287,10 +289,11 @@ figure
|
|||
### Example
|
||||
|
||||
Here are a couple of custom timings in action. Both enter and leave last for
|
||||
200 milliseconds but they have different easings. The leave begins after a
|
||||
slight delay:
|
||||
200 milliseconds, that is `0.2s`, but they have different easings. The leave begins after a
|
||||
slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
|
||||
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-timings.component.ts', 'animationdef')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-timings.component.ts', 'animationdef', 'hero-list-timings.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
## Multi-step animations with keyframes
|
||||
|
|
@ -307,7 +310,7 @@ figure
|
|||
This example adds some "bounce" to the enter and leave animations with
|
||||
keyframes:
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'animationdef')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'animationdef', 'hero-list-multistep.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
Note that the offsets are *not* defined in terms of absolute time. They are relative
|
||||
|
|
@ -334,7 +337,7 @@ figure
|
|||
enter and leave allows for two different timing configurations. Both
|
||||
are applied to the same element in parallel, but run independently of each other:
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-groups.component.ts', 'animationdef')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-groups.component.ts', 'animationdef', 'hero-list-groups.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
One group animates the element transform and width; the other group animates the opacity.
|
||||
|
|
@ -344,10 +347,10 @@ figure
|
|||
|
||||
A callback is fired when an animation is started and also when it is done.
|
||||
|
||||
In the keyframes example, you have a `trigger` called `@flyInOut`. There you can hook
|
||||
In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook
|
||||
those callbacks like this:
|
||||
|
||||
+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template')(format=".")
|
||||
+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template', 'hero-list-multistep.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
The callbacks receive an `AnimationTransitionEvent` which contains useful properties such as `fromState`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue