From 7663dd082d9ab6998cdec6d14aa38a0108c85eab Mon Sep 17 00:00:00 2001 From: dario-piotrowicz Date: Sat, 4 Dec 2021 13:48:11 +0000 Subject: [PATCH] docs(animations): add links to `state()` references (#44376) the keyword 'state' is included in the `ignoredWords` set that prevents certain words to be autolinked, this causes the animations' state function not to be automatically linked, so manually link those references to the state api docs PR Close #44376 --- aio/content/guide/animations.md | 12 ++++++------ aio/content/guide/router-tutorial-toh.md | 2 +- aio/content/guide/transition-and-triggers.md | 4 ++-- packages/animations/src/animation_metadata.ts | 14 +++++++------- packages/core/src/metadata/directives.ts | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 62bccae9980..c22e9ad34d5 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -82,11 +82,11 @@ In HTML, these attributes are set using ordinary CSS styles such as color and op ### Animation state and styles -Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function. +Use Angular's [state](api/animations/state)() function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function. Use the `style()` function to define a set of styles to associate with a given state name. You must use [*camelCase*](guide/glossary#case-conventions) for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`. -Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. +Let's see how Angular's [state](api/animations/state)() function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. @@ -154,13 +154,13 @@ region="transition2">
-**Note:** Some additional notes on using styles within `state` and `transition` functions. +**Note:** Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. -* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation completes. +* Use [state](api/animations/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. +* When animations are disabled, `transition()` styles can be skipped, but [state](api/animations/state)() styles can't. * Include multiple state pairs within the same `transition()` argument:
`transition( 'on => off, off => void' )`.
@@ -231,7 +231,7 @@ region="trigger"> ### Summary -You learned to add animation to a transition between two states, using `style()` and `state()` along with `animate()` for the timing. +You learned to add animation to a transition between two states, using `style()` and [state](api/animations/state)() along with `animate()` for the timing. Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers). diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md index e254bd3bd00..a2cacc9d150 100644 --- a/aio/content/guide/router-tutorial-toh.md +++ b/aio/content/guide/router-tutorial-toh.md @@ -1195,7 +1195,7 @@ First, import the `BrowserAnimationsModule` and add it to the `imports` array: Next, add a `data` object to the routes for `HeroListComponent` and `HeroDetailComponent`. -Transitions are based on `states` and you use the `animation` data from the route to provide a named animation `state` for the transitions. +Transitions are based on `states` and you use the `animation` data from the route to provide a named animation [`state`](api/animations/state) for the transitions. diff --git a/aio/content/guide/transition-and-triggers.md b/aio/content/guide/transition-and-triggers.md index be0dabf29b0..45869ee1a74 100644 --- a/aio/content/guide/transition-and-triggers.md +++ b/aio/content/guide/transition-and-triggers.md @@ -7,7 +7,7 @@ This chapter also explores multiple animation triggers, animation callbacks, and ## Predefined states and wildcard matching -In Angular, transition states can be defined explicitly through the `state()` function, or using the predefined `*` (wildcard) and `void` states. +In Angular, transition states can be defined explicitly through the [state](api/animations/state)() function, or using the predefined `*` (wildcard) and `void` states. ### Wildcard state @@ -119,7 +119,7 @@ In the component file, the `:enter` transition sets an initial opacity of 0, and -Note that this example doesn't need to use `state()`. +Note that this example doesn't need to use [state](api/animations/state)(). ## :increment and :decrement in transitions diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts index 90b9cac4436..e2d04979858 100644 --- a/packages/animations/src/animation_metadata.ts +++ b/packages/animations/src/animation_metadata.ts @@ -98,7 +98,7 @@ export declare interface AnimateChildOptions extends AnimationOptions { export const enum AnimationMetadataType { /** * Associates a named animation state with a set of CSS styles. - * See `state()` + * See [`state()`](api/animations/state) */ State = 0, /** @@ -204,7 +204,7 @@ export interface AnimationTriggerMetadata extends AnimationMetadata { /** * Encapsulates an animation state by associating a state name with a set of CSS styles. - * Instantiated and returned by the `state()` function. + * Instantiated and returned by the [`state()`](api/animations/state) function. * * @publicApi */ @@ -450,13 +450,13 @@ export interface AnimationStaggerMetadata extends AnimationMetadata { } /** - * Creates a named animation trigger, containing a list of `state()` + * Creates a named animation trigger, containing a list of [`state()`](api/animations/state) * and `transition()` entries to be evaluated when the expression * bound to the trigger changes. * * @param name An identifying string. - * @param definitions An animation definition object, containing an array of `state()` - * and `transition()` declarations. + * @param definitions An animation definition object, containing an array of + * [`state()`](api/animations/state) and `transition()` declarations. * * @return An object that encapsulates the trigger data. * @@ -744,8 +744,8 @@ export function sequence( /** * Declares a key/value object containing CSS properties/styles that - * can then be used for an animation `state`, within an animation `sequence`, - * or as styling data for calls to `animate()` and `keyframes()`. + * can then be used for an animation [`state`](api/animations/state), within an animation + *`sequence`, or as styling data for calls to `animate()` and `keyframes()`. * * @param tokens A set of CSS styles or HTML styles associated with an animation state. * The value can be any of the following: diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts index 3ac581b69a2..bcd0233426a 100644 --- a/packages/core/src/metadata/directives.ts +++ b/packages/core/src/metadata/directives.ts @@ -509,7 +509,7 @@ export interface Component extends Directive { /** * One or more animation `trigger()` calls, containing - * `state()` and `transition()` definitions. + * [`state()`](api/animations/state) and `transition()` definitions. * See the [Animations guide](/guide/animations) and animations API documentation. * */