mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Teri Glover
committed by
Jessica Janiuk
Jessica Janiuk
parent
33708f256d
commit
3d090ba74d
@@ -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`.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@@ -91,7 +91,7 @@ Let's see how Angular's `state()` function works with the `style()` func
|
||||
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state1" language="typescript">
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state2" language="typescript">
|
||||
</code-example>
|
||||
@@ -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">
|
||||
</code-example>
|
||||
|
||||
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:<br/> `transition( 'on => off, off => void' )`.
|
||||
* Include multiple state pairs within the same `transition()` argument:<br/> `transition( 'on => off, off => void' )`.
|
||||
</div>
|
||||
|
||||
### Triggering the animation
|
||||
@@ -184,7 +184,7 @@ Animations are defined in the metadata of the component that controls the HTML e
|
||||
|
||||
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" language="typescript" region="component"></code-example>
|
||||
|
||||
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.
|
||||
|
||||
```
|
||||
<div [@triggerName]="expression">...</div>;
|
||||
@@ -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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
<code-example header="src/app/open-close.component.ts" path="animations/src/app/open-close.component.ts" region="trigger-wildcard1" language="typescript"></code-example>
|
||||
|
||||
@@ -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:
|
||||
|
||||
<code-example path="animations/src/app/hero-list-enter-leave.component.ts" header="src/app/hero-list-enter-leave.component.ts" region="animationdef" language="typescript"></code-example>
|
||||
|
||||
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
|
||||
<code-example path="animations/src/app/open-close.component.2.html" header="src/app/open-close.component.html" region="trigger-boolean">
|
||||
</code-example>
|
||||
|
||||
In the code snippet above, the HTML template binds a `<div>` 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 `<div>` 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.
|
||||
|
||||
<code-tabs>
|
||||
|
||||
@@ -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.
|
||||
|
||||
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="events1" language="typescript"></code-example>
|
||||
|
||||
@@ -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.
|
||||
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/animations/keyframes-offset-500.png" alt="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)
|
||||
|
||||
Reference in New Issue
Block a user