Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update links to group() API #30618

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions aio/content/guide/complex-animation-sequences.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Functions that control complex animation sequences are as follows:

* `query()` finds one or more inner HTML elements.
* `stagger()` applies a cascading delay to animations for multiple elements.
* `group()` runs multiple animation steps in parallel.
* [`group()`](api/animations/group) runs multiple animation steps in parallel.
* `sequence()` runs animation steps one after another.

{@a complex-sequence}
Expand All @@ -42,11 +42,11 @@ The following example demonstrates how to use `query()` and `stagger()` function

## Parallel animation using group() function

You've seen how to add a delay between each successive animation. But you may also want to configure animations that happen in parallel. For example, you may want to animate two CSS properties of the same element but use a different `easing` function for each one. For this, you can use the animation `group()` function.
You've seen how to add a delay between each successive animation. But you may also want to configure animations that happen in parallel. For example, you may want to animate two CSS properties of the same element but use a different `easing` function for each one. For this, you can use the animation [`group()`](api/animations/group) function.

<div class="alert is-helpful">

**Note:** The `group()` function is used to group animation *steps*, rather than animated elements.
**Note:** The [`group()`](api/animations/group) function is used to group animation *steps*, rather than animated elements.
</div>

In the following example, using groups on both `:enter` and `:leave` allow for two different timing configurations. They're applied to the same element in parallel, but run independently.
Expand All @@ -55,7 +55,7 @@ In the following example, using groups on both `:enter` and `:leave` allow for t

## Sequential vs. parallel animations

Complex animations can have many things happening at once. But what if you want to create an animation involving several animations happening one after the other? Earlier we used `group()` to run multiple animations all at the same time, in parallel.
Complex animations can have many things happening at once. But what if you want to create an animation involving several animations happening one after the other? Earlier we used [`group()`](api/animations/group) to run multiple animations all at the same time, in parallel.

A second function called `sequence()` lets you run those same animations one after the other. Within `sequence()`, the animation steps consist of either `style()` or `animate()` function calls.

Expand Down Expand Up @@ -92,7 +92,7 @@ For each match:

## Animation sequence summary

Angular functions for animating multiple elements start with `query()` to find inner elements, for example gathering all images within a `<div>`. The remaining functions, `stagger()`, `group()`, and `sequence()`, apply cascades or allow you to control how multiple animation steps are applied.
Angular functions for animating multiple elements start with `query()` to find inner elements, for example gathering all images within a `<div>`. The remaining functions, `stagger()`, [`group()`](api/animations/group), and `sequence()`, apply cascades or allow you to control how multiple animation steps are applied.

## More on Angular animations

Expand Down
1 change: 1 addition & 0 deletions aio/src/styles/0-base/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ th {
code {
font-family: $code-font;
font-size: 90%;
color: $darkgray;
}

.sidenav-content a {
Expand Down