diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index c70195143c1..62b4aad3762 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -1,6 +1,6 @@ # Introduction to Angular animations -Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways: +Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways: * Without animations, web page transitions can seem abrupt and jarring. @@ -67,7 +67,7 @@ In the component file, add a metadata property called `animations:` within the ` Let's animate a transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's the `closed` state, it's translucent and blue. -In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. +In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
@@ -91,7 +91,7 @@ Let's see how Angular's `state()` function works with the `style⁣­(⁠)` func -In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.7, and a background color of blue. +In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green. @@ -100,10 +100,10 @@ In the `closed` state, shown below, the button has a height of 100 pixels, an op In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. -To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. +To make the change less abrupt, you need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. -Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. You can also use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function. +Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. Use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function. #### Animation metadata: duration, delay, and easing @@ -144,7 +144,7 @@ This example provides a state transition from `open` to `closed` with a one seco region="transition1"> -In the code snippet above, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. In this case, the state change from `open` to `closed` takes one second, expressed here as `1s`. +In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. In this case, the state change from `open` to `closed` takes one second, expressed here as `1s`. This example adds a state transition from the `closed` state to the `open` state with a 0.5 second transition animation arc. @@ -156,13 +156,13 @@ region="transition2"> **Note:** Some additional notes on using styles within `state` and `transition` functions. -* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation has completed. +* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation completes. * Use `transition()` to define intermediate styles, which create the illusion of motion during the animation. * When animations are disabled, `transition()` styles can be skipped, but `state()` styles can't. -* You can include multiple state pairs within the same `transition()` argument:
`transition( 'on => off, off => void' )`. +* Include multiple state pairs within the same `transition()` argument:
`transition( 'on => off, off => void' )`.
### Triggering the animation @@ -184,7 +184,7 @@ Animations are defined in the metadata of the component that controls the HTML e -When you've defined an animation trigger for a component, you can attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. +When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. ```
...
; @@ -233,7 +233,7 @@ region="trigger"> You learned to add animation to a transition between two states, using `style()` and `state()` along with `animate()` for the timing. -You can learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers). +Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers). {@a animation-api-summary} ## Animations API summary @@ -321,7 +321,7 @@ What it does ## More on Angular animations -You may also be interested in the following: +You might also be interested in the following: * [Transition and triggers](guide/transition-and-triggers) * [Complex animation sequences](guide/complex-animation-sequences) diff --git a/aio/content/guide/transition-and-triggers.md b/aio/content/guide/transition-and-triggers.md index 7a7cfec75b3..7cf8f750cd2 100644 --- a/aio/content/guide/transition-and-triggers.md +++ b/aio/content/guide/transition-and-triggers.md @@ -22,7 +22,7 @@ For example, a transition of `open => *` applies when the element's state change 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. +This lets us add new states without having to include separate transitions for each one. @@ -58,12 +58,12 @@ Use the wildcard `*` with a style to tell the animation to use whatever the curr ### Void state -You can use the `void` state to configure transitions for an element that is entering or leaving a page. See [Animating entering and leaving a view](#enter-leave-view). +Use the `void` state to configure transitions for an element that is entering or leaving a page. See [Animating entering and leaving a view](#enter-leave-view). ### Combining wildcard and void states -You can combine wildcard and void states in a transition to trigger animations that enter and leave the page: +Combine wildcard and void states in a transition to trigger animations that enter and leave the page: * A transition of `* => void` applies when the element leaves a view, regardless of what state it was in before it left. @@ -88,7 +88,7 @@ Now add a new behavior: -In the above code, you applied the `void` state when the HTML element isn't attached to a view. +In the preceding code, you applied the `void` state when the HTML element isn't attached to a view. {@a enter-leave-view} @@ -140,7 +140,7 @@ If a trigger contains a boolean value as a binding value, then this value can be -In the code snippet above, the HTML template binds a `
` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`. This is an alternative to the practice of creating two named states of `open` and `close`. +In the preceding code snippet, the HTML template binds a `
` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`. This is an alternative to the practice of creating two named states of `open` and `close`. In the component code, in the `@Component` metadata under the `animations:` property, when the state evaluates to `true` (meaning "open" here), the associated HTML element's height is a wildcard style or default. In this case, use whatever height the element already had before the animation started. When the element is "closed," the element animates to a height of 0, which makes it invisible. @@ -149,17 +149,17 @@ In the component code, in the `@Component` metadata under the `animations:` prop ## Multiple animation triggers -You can define more than one animation trigger for a component. You can attach animation triggers to different elements, and the parent-child relationships among the elements affect how and when the animations run. +You can define more than one animation trigger for a component. Attach animation triggers to different elements, and the parent-child relationships among the elements affect how and when the animations run. ### Parent-child animations -Each time an animation is triggered in Angular, the parent animation always get priority and child animations are blocked. In order for a child animation to run, the parent animation must query each of the elements containing child animations and then allow the animations to run using the [`animateChild()`](api/animations/animateChild) function. +Each time an animation is triggered in Angular, the parent animation always gets priority and child animations are blocked. For a child animation to run, the parent animation must query each of the elements containing child animations and then let the animations run using the [`animateChild()`](api/animations/animateChild) function. #### Disabling an animation on an HTML element A special animation control binding called `@.disabled` can be placed on an HTML element to disable animations on that element, as well as any nested elements. When true, the `@.disabled` binding prevents all animations from rendering. -The code sample below shows how to use this feature. +The following code sample shows how to use this feature. @@ -196,7 +196,7 @@ 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. The example below features a component that contains an `openClose` trigger. +The animation `trigger()` function emits *callbacks* when it starts and when it finishes. The following example features a component that contains an `openClose` trigger. @@ -245,7 +245,7 @@ Offsets are relative measures from zero to one, marking the beginning and end of 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. +Specifying an offset of 0.8 for the middle transition in the preceding example might look like this.
keyframes with offset @@ -305,11 +305,11 @@ The animation takes whatever height the element has before it leaves, and animat ### Keyframes summary -The `keyframes()` function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change occurs. +The `keyframes()` function in Angular lets you specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change occurs. ## More on Angular animations -You may also be interested in the following: +You might also be interested in the following: * [Introduction to Angular animations](guide/animations) * [Complex animation sequences](guide/complex-animation-sequences)