diff --git a/aio/content/examples/animations/src/app/app.component.html b/aio/content/examples/animations/src/app/app.component.html index c2d1188f70..1deca03101 100644 --- a/aio/content/examples/animations/src/app/app.component.html +++ b/aio/content/examples/animations/src/app/app.component.html @@ -12,10 +12,12 @@ Toggle All Animations Auto Calculation Filter/Stagger Hero Groups + Insert/Remove +
- \ No newline at end of file + diff --git a/aio/content/examples/animations/src/app/app.module.ts b/aio/content/examples/animations/src/app/app.module.ts index ae5c73f29f..1b3e8969d8 100644 --- a/aio/content/examples/animations/src/app/app.module.ts +++ b/aio/content/examples/animations/src/app/app.module.ts @@ -35,6 +35,7 @@ import { InsertRemoveComponent } from './insert-remove.component'; { path: 'hero-groups', component: HeroListGroupPageComponent }, { path: 'enter-leave', component: HeroListEnterLeavePageComponent }, { path: 'auto', component: HeroListAutoCalcPageComponent }, + { path: 'insert-remove', component: InsertRemoveComponent}, { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} }, { path: 'about', component: AboutComponent, data: {animation: 'AboutPage'} }, diff --git a/aio/content/examples/animations/src/app/insert-remove.component.html b/aio/content/examples/animations/src/app/insert-remove.component.html index f40238dbea..59dd8d7ba0 100644 --- a/aio/content/examples/animations/src/app/insert-remove.component.html +++ b/aio/content/examples/animations/src/app/insert-remove.component.html @@ -1,4 +1,7 @@ + +

Insert/Remove

+ diff --git a/aio/content/examples/animations/src/app/insert-remove.component.ts b/aio/content/examples/animations/src/app/insert-remove.component.ts index 596f8e7168..012b02ad5c 100644 --- a/aio/content/examples/animations/src/app/insert-remove.component.ts +++ b/aio/content/examples/animations/src/app/insert-remove.component.ts @@ -9,10 +9,10 @@ import { trigger, transition, animate, style } from '@angular/animations'; trigger('myInsertRemoveTrigger', [ transition(':enter', [ style({ opacity: 0 }), - animate('5s', style({ opacity: 1 })), + animate('100ms', style({ opacity: 1 })), ]), transition(':leave', [ - animate('5s', style({ opacity: 0 })) + animate('100ms', style({ opacity: 0 })) ]) ]), // #enddocregion enter-leave-trigger diff --git a/aio/content/guide/transition-and-triggers.md b/aio/content/guide/transition-and-triggers.md index 909bb4344d..04108a5c71 100644 --- a/aio/content/guide/transition-and-triggers.md +++ b/aio/content/guide/transition-and-triggers.md @@ -2,7 +2,8 @@ You learned the basics of Angular animations in the [introduction](guide/animations) page. -In this guide, we go into greater depth on special transition states such as `*` (wildcard) and `void`, and show how these special states are used for elements entering and leaving a view. The chapter also explores multiple animation triggers, animation callbacks and sequence-based animation using keyframes. +This guide goes into greater depth on special transition states such as `*` (wildcard) and `void`, and show how these special states are used for elements entering and leaving a view. +This chapter also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes. ## Predefined states and wildcard matching @@ -18,7 +19,8 @@ For example, a transition of `open => *` applies when the element's state change wildcard state expressions -Here's another code sample using the wildcard state together with our previous example using the `open` and `closed` states. Instead of defining each state-to-state transition pair, we're now saying that any transition to `closed` takes 1 second, and any transition to `open` takes 0.5 seconds. +The following is another code sample using the wildcard state together with the previous example using the `open` and `closed` states. +Instead of defining each state-to-state transition pair, any transition to `closed` takes 1 second, and any transition to `open` takes 0.5 seconds. This allows us to add new states without having to include separate transitions for each one. @@ -30,7 +32,9 @@ Use a double arrow syntax to specify state-to-state transitions in both directio ### Using wildcard state with multiple transition states -In our two-state button example, the wildcard isn't that useful because there are only two possible states, `open` and `closed`. Wildcard states are better when an element in one particular state has multiple potential states that it can change to. If our button can change from `open` to either `closed` or something like `inProgress`, using a wildcard state could reduce the amount of coding needed. +In the two-state button example, the wildcard isn't that useful because there are only two possible states, `open` and `closed`. +Wildcard states are better when an element in one particular state has multiple potential states that it can change to. +If the button can change from `open` to either `closed` or something like `inProgress`, using a wildcard state could reduce the amount of coding needed.
wildcard state with 3 states @@ -73,18 +77,18 @@ This section shows how to animate elements entering or leaving a page.
-**Note:** For our purposes, an element entering or leaving a view is equivalent to being inserted or removed from the DOM. +**Note:** For this example, an element entering or leaving a view is equivalent to being inserted or removed from the DOM.
-Now we'll add a new behavior: +Now add a new behavior: * When you add a hero to the list of heroes, it appears to fly onto the page from the left. * When you remove a hero from the list, it appears to fly out to the right. -In the above code, we applied the `void` state when the HTML element isn't attached to a view. +In the above code, you applied the `void` state when the HTML element isn't attached to a view. {@a enter-leave-view} @@ -105,7 +109,7 @@ So, use the aliases `:enter` and `:leave` to target HTML elements that are inser The `:enter` transition runs when any `*ngIf` or `*ngFor` views are placed on the page, and `:leave` runs when those views are removed from the page. -In this example, we have a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code. +This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code. @@ -169,11 +173,13 @@ The code sample below shows how to use this feature. When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off. -When an element within an HTML template has animations disabled using the `@.disabled` host binding, animations are disabled on all inner elements as well. You can't selectively disable multiple animations on a single element. +When an element within an HTML template has animations disabled using the `@.disabled` host binding, animations are disabled on all inner elements as well. +You can't selectively disable multiple animations on a single element. However, selective child animations can still be run on a disabled parent in one of the following ways: -* A parent animation can use the [`query()`](https://angular.io/api/animations/query) function to collect inner elements located in disabled areas of the HTML template. Those elements can still animate. +* A parent animation can use the [`query()`](https://angular.io/api/animations/query) function to collect inner elements located in disabled areas of the HTML template. +Those elements can still animate. * A subanimation can be queried by a parent and then later animated with the `animateChild()` function. @@ -190,22 +196,27 @@ To disable all animations for an Angular app, place the `@.disabled` host bindin ## Animation callbacks -The animation `trigger()` function emits *callbacks* when it starts and when it finishes. In the example below we have a component that contains an `openClose` trigger. +The animation `trigger()` function emits *callbacks* when it starts and when it finishes. The example below features a component that contains an `openClose` trigger. -In the HTML template, the animation event is passed back via `$event`, as `@trigger.start` and `@trigger.done`, where `trigger` is the name of the trigger being used. In our example, the trigger `openClose` appears as follows. +In the HTML template, the animation event is passed back via `$event`, as `@trigger.start` and `@trigger.done`, where `trigger` is the name of the trigger being used. +In this example, the trigger `openClose` appears as follows. -A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup. For example, you could set up the **InProgress** button to have its own looping animation where it pulsates or does some other visual motion while the backend system operation finishes. +A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup. +For example, you could set up the **InProgress** button to have its own looping animation where it pulsates or does some other visual motion while the backend system operation finishes. -Then, another animation can be called when the current animation finishes. For example, the button goes from the `inProgress` state to the `closed` state when the API call is completed. +Then, another animation can be called when the current animation finishes. +For example, the button goes from the `inProgress` state to the `closed` state when the API call is completed. -An animation can influence an end user to *perceive* the operation as faster, even when it isn't. Thus, a simple animation can be a cost-effective way to keep users happy, rather than seeking to improve the speed of a server call and having to compensate for circumstances beyond your control, such as an unreliable network connection. +An animation can influence an end user to *perceive* the operation as faster, even when it isn't. +Thus, a simple animation can be a cost-effective way to keep users happy, rather than seeking to improve the speed of a server call and having to compensate for circumstances beyond your control, such as an unreliable network connection. -Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console. The following code snippet creates console log output for our original example, a button with the two states of `open` and `closed`. +Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console. +The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`. @@ -213,9 +224,10 @@ Callbacks can serve as a debugging tool, for example in conjunction with `consol ## Keyframes -In the previous section, we saw a simple two-state transition. Now we'll create an animation with multiple steps run in sequence using *keyframes*. +The previous section features a simple two-state transition. Now create an animation with multiple steps run in sequence using *keyframes*. -Angular's `keyframe()` function is similar to keyframes in CSS. Keyframes allow several style changes within a single timing segment. For example, our button, instead of fading, could change color several times over a single 2-second timespan. +Angular's `keyframe()` function is similar to keyframes in CSS. Keyframes allow several style changes within a single timing segment. +For example, the button, instead of fading, could change color several times over a single 2-second timespan.
keyframes @@ -227,9 +239,13 @@ The code for this color change might look like this. ### Offset -Keyframes include an *offset* that defines the point in the animation where each style change occurs. Offsets are relative measures from zero to one, marking the beginning and end of the animation, respectively and should be applied to each of the keyframe's steps if used at least once. +Keyframes include an *offset* that defines the point in the animation where each style change occurs. +Offsets are relative measures from zero to one, marking the beginning and end of the animation, respectively and should be applied to each of the keyframe's steps if used at least once. -Defining offsets for keyframes is optional. If you omit them, evenly spaced offsets are automatically assigned. For example, three keyframes without predefined offsets receive offsets of 0, 0.5, and 1. Specifying an offset of 0.8 for the middle transition in the above example might look like this. +Defining offsets for keyframes is optional. +If you omit them, evenly spaced offsets are automatically assigned. +For example, three keyframes without predefined offsets receive offsets of 0, 0.5, and 1. +Specifying an offset of 0.8 for the middle transition in the above example might look like this.
keyframes with offset @@ -248,9 +264,9 @@ Use keyframes to create a pulse effect in your animations by defining styles at Here's an example of using keyframes to create a pulse effect: -* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second +* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second. -* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe +* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe.
keyframes with irregular pulsation @@ -262,7 +278,8 @@ The code snippet for this animation might look like this. ### Animatable properties and units -Angular's animation support builds on top of web animations, so you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page. +Angular's animation support builds on top of web animations, so you can animate any property that the browser considers animatable. +This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page. For positional properties with a numeric value, define a unit by providing the value as a string, in quotes, with the appropriate suffix: @@ -270,15 +287,19 @@ For positional properties with a numeric value, define a unit by providing the v * Relative font size: `'3em'` * Percentage: `'100%'` -If you don't provide a unit when specifying dimension, Angular assumes a default unit of pixels, or px. Expressing 50 pixels as `50` is the same as saying `'50px'`. +If you don't provide a unit when specifying dimension, Angular assumes a default unit of pixels, or px. +Expressing 50 pixels as `50` is the same as saying `'50px'`. ### Automatic property calculation with wildcards -Sometimes you don't know the value of a dimensional style property until runtime. For example, elements often have widths and heights that depend on their content and the screen size. These properties are often challenging to animate using CSS. +Sometimes you don't know the value of a dimensional style property until runtime. +For example, elements often have widths and heights that depend on their content and the screen size. +These properties are often challenging to animate using CSS. In these cases, you can use a special wildcard `*` property value under `style()`, so that the value of that particular style property is computed at runtime and then plugged into the animation. -In this example, we have a trigger called `shrinkOut`, used when an HTML element leaves the page. The animation takes whatever height the element has before it leaves, and animates from that height to zero. +The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page. +The animation takes whatever height the element has before it leaves, and animates from that height to zero.