diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 0ac55c3420..342932bb1a 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/public/docs/ts/latest/guide/animations.jade @@ -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`,