mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs(animations): improve grammar and clarity across animation guides
This commit is contained in:
Bhuvansh855
Matthew Beck (Berry)
parent
2fcfffbc7d
commit
dc4b3172df
7 changed files with 30 additions and 30 deletions
|
|
@ -17,12 +17,12 @@ The functions that control complex animation sequences are:
|
|||
|
||||
## The query() function
|
||||
|
||||
Most complex animations rely on the `query()` function to find child elements and apply animations to them, basic examples of such are:
|
||||
Most complex animations rely on the `query()` function to find child elements and apply animations to them. Basic examples include:
|
||||
|
||||
| Examples | Details |
|
||||
| :------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `query()` followed by `animate()` | Used to query simple HTML elements and directly apply animations to them. |
|
||||
| `query()` followed by `animateChild()` | Used to query child elements, which themselves have animations metadata applied to them and trigger such animation \(which would be otherwise be blocked by the current/parent element's animation\). |
|
||||
| Examples | Details |
|
||||
| :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `query()` followed by `animate()` | Used to query simple HTML elements and directly apply animations to them. |
|
||||
| `query()` followed by `animateChild()` | Used to query child elements, which themselves have animation metadata applied to them and trigger such animations \(which would otherwise be blocked by the current/parent element's animation\). |
|
||||
|
||||
The first argument of `query()` is a [css selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) string which can also contain the following Angular-specific tokens:
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ You can also see an illustration of this in the animations example \(introduced
|
|||
|
||||
## Animate multiple elements using query() and stagger() functions
|
||||
|
||||
After having queried child elements via `query()`, the `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
|
||||
After querying child elements via `query()`, the `stagger()` function lets you define a timing gap between each item, animating elements with a delay between them.
|
||||
|
||||
The following example demonstrates how to use the `query()` and `stagger()` functions to animate a list \(of heroes\) adding each in sequence, with a slight delay, from top to bottom.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ CSS offers a robust set of tools for you to create beautiful and engaging animat
|
|||
|
||||
## How to write animations in native CSS
|
||||
|
||||
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
|
||||
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here are a few of them:
|
||||
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
|
||||
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
|
||||
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
|
||||
|
|
@ -14,7 +14,7 @@ and a couple of videos:
|
|||
[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
|
||||
[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
|
||||
|
||||
Check some of these various guides and tutorials out, and then come back to this guide.
|
||||
Check out some of these guides and tutorials, then come back to this guide.
|
||||
|
||||
## Creating Reusable Animations
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ Adding the class `animated-class` to an element would trigger the animation on t
|
|||
|
||||
### Animating State and Styles
|
||||
|
||||
You may want to animate between two different states, for example when an element is opened or closed. You can accomplish this by using CSS classes either using a keyframe animation or transition styling.
|
||||
You may want to animate between two different states, for example when an element is opened or closed. You can accomplish this by using CSS classes, either with a keyframe animation or transition styling.
|
||||
|
||||
<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-states"/>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ You can see similar examples in the template guide for [animating styles directl
|
|||
|
||||
### Transitions, Timing, and Easing
|
||||
|
||||
Animating often requires adjusting timing, delays and easeing behaviors. This can be done using several css properties or shorthand properties.
|
||||
Animating often requires adjusting timing, delays, and easing behaviors. This can be done using several css properties or shorthand properties.
|
||||
|
||||
Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p
|
|||
|
||||
### Animating Auto Height
|
||||
|
||||
You can use css-grid to animate to auto height.
|
||||
You can use CSS Grid to animate to auto height.
|
||||
|
||||
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
|
||||
<docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
# Animating your applications with `animate.enter` and `animate.leave`
|
||||
|
||||
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:
|
||||
Well-designed animations can make your application more intuitive and engaging, but they aren't just cosmetic.
|
||||
Animations can improve your application and the user experience in a number of ways:
|
||||
|
||||
- Without animations, web page transitions can seem abrupt and jarring
|
||||
- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
|
||||
- Good animations can smoothly direct the user's attention throughout a workflow
|
||||
|
||||
Angular provides `animate.enter` and `animate.leave` to animate your application's elements. These two features apply enter and leave CSS classes at the appropriate times or call functions to apply animations from third party libraries. `animate.enter` and `animate.leave` are not directives. They are special API supported directly by the Angular compiler. They can be used on elements directly and can also be used as a host binding.
|
||||
Angular provides `animate.enter` and `animate.leave` to animate your application's elements. These two features apply enter and leave CSS classes at the appropriate times or call functions to apply animations from third party libraries. `animate.enter` and `animate.leave` are not directives. They are special API supported directly by the Angular compiler. They can be used directly on elements and also as a host binding.
|
||||
|
||||
## `animate.enter`
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ You can use `animate.enter` to animate elements as they _enter_ the DOM. You can
|
|||
<docs-code header="enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
|
||||
</docs-code-multifile>
|
||||
|
||||
When the animation completes, Angular removes the class or classes that you specified in `animate.enter` from the DOM. Animation classes are only be present while the animation is active.
|
||||
When the animation completes, Angular removes the class or classes that you specified in `animate.enter` from the DOM. Animation classes are only present while the animation is active.
|
||||
|
||||
NOTE: When using multiple keyframe animations or transition properties on an element, Angular removes all classes only _after_ the longest animation has completed.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ The `@angular/animations` package is deprecated as of v20.2, which also introduc
|
|||
|
||||
## How to write animations in native CSS
|
||||
|
||||
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
|
||||
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here are a few of them:
|
||||
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
|
||||
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
|
||||
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
|
||||
|
|
@ -14,7 +14,7 @@ and a couple of videos:
|
|||
[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
|
||||
[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
|
||||
|
||||
Check some of these various guides and tutorials out, and then come back to this guide.
|
||||
Check out some of these guides and tutorials, then come back to this guide.
|
||||
|
||||
## Creating Reusable Animations
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ The animations package allowed you to define various states using the [`state()`
|
|||
|
||||
<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
|
||||
|
||||
This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
|
||||
This same behavior can be accomplished natively by using CSS classes, either with a keyframe animation or transition styling.
|
||||
|
||||
#### With Native CSS
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ The animations package offers the ability to animate things that have been histo
|
|||
<docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.css" />
|
||||
</docs-code-multifile>
|
||||
|
||||
You can use css-grid to animate to auto height.
|
||||
You can use CSS Grid to animate to auto height.
|
||||
|
||||
#### With Native CSS
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
|
||||
|
||||
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:
|
||||
Animation provides the illusion of motion: HTML elements change styles over time.
|
||||
Well-designed animations can make your application more intuitive and engaging, but they aren't just cosmetic.
|
||||
Animations can improve your application and the user experience in a number of ways:
|
||||
|
||||
- Without animations, web page transitions can seem abrupt and jarring
|
||||
- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
|
||||
|
|
@ -70,7 +70,7 @@ You put the trigger that defines an animation within the `animations` metadata p
|
|||
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.
|
||||
When it's in 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.
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
|
||||
|
||||
This topic provides some examples of how to create reusable animations.
|
||||
This topic provides examples of how to create reusable animations.
|
||||
|
||||
## Create reusable animations
|
||||
|
||||
To create a reusable animation, use the [`animation()`](api/animations/animation) function to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable.
|
||||
You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) function.
|
||||
You can then import and reuse this animation in your application components using the [`useAnimation()`](api/animations/useAnimation) function.
|
||||
|
||||
<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" region="animation-const"/>
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ For example, the following snippet exports the animation `trigger`.
|
|||
|
||||
<docs-code header="animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" region="trigger-const"/>
|
||||
|
||||
From this point, you can import reusable animation variables in your component class.
|
||||
From this point, you can import reusable animation variables into your component class.
|
||||
For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function.
|
||||
|
||||
<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.3.ts" region="reusable"/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
|
||||
|
||||
This guide goes into depth on special transition states such as the `*` wildcard and `void`. It shows how these special states are used for elements entering and leaving a view.
|
||||
This guide goes into depth on special transition states such as the `*` wildcard and `void`. It also shows how these states are used for elements entering and leaving a view.
|
||||
This section also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.
|
||||
|
||||
## Predefined states and wildcard matching
|
||||
|
|
@ -99,7 +99,7 @@ Use the aliases `:enter` and `:leave` to target HTML elements that are inserted
|
|||
|
||||
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.
|
||||
|
||||
IMPORTANT: Entering/leaving behaviors can sometime be confusing.
|
||||
IMPORTANT: Entering/leaving behaviors can sometimes be confusing.
|
||||
As a rule of thumb consider that any element being added to the DOM by Angular passes via the `:enter` transition. Only elements being directly removed from the DOM by Angular pass via the `:leave` transition. For example, an element's view is removed from the DOM because its parent is being removed from the DOM.
|
||||
|
||||
This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`.
|
||||
|
|
@ -239,7 +239,7 @@ You can combine keyframes with `duration`, `delay`, and `easing` within a single
|
|||
|
||||
### Keyframes with a pulsation
|
||||
|
||||
Use keyframes to create a pulse effect in your animations by defining styles at specific offset throughout the animation.
|
||||
Use keyframes to create a pulse effect in your animations by defining styles at specific offsets throughout the animation.
|
||||
|
||||
Here's an example of using keyframes to create a pulse effect:
|
||||
|
||||
|
|
@ -254,7 +254,7 @@ The code snippet for this animation might look like this.
|
|||
|
||||
### Animatable properties and units
|
||||
|
||||
Angular animations support builds on top of web animations, so you can animate any property that the browser considers animatable.
|
||||
Angular animations are built 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.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue