5 lines
37 KiB
JSON
5 lines
37 KiB
JSON
{
|
|
"id": "api/animations/transition",
|
|
"title": "transition",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/animations\", \"name\": \"@angular/animations\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/animations/transition\", \"name\": \"transition\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/animations\">@angular/animations</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/animations/src/animation_metadata.ts?message=docs(animations)%3A%20describe%20your%20change...#L872-L1047\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/src/animation_metadata.ts#L872-L1047\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"transition\">transition<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#transition\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label function\">function</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Declares an animation transition as a sequence of animation steps to run when a given\ncondition is satisfied. The condition is a Boolean expression or function that compares\nthe previous and current animation states, and returns true if this transition should occur.\nWhen the state criteria of a defined transition are met, the associated animation is\ntriggered.</p>\n\n \n </section>\n \n \n \n\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"> <span class=\"member-name\"><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a></span>(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean), steps: <a href=\"api/animations/AnimationMetadata\" class=\"code-anchor\">AnimationMetadata</a> | <a href=\"api/animations/AnimationMetadata\" class=\"code-anchor\">AnimationMetadata</a>[], options: <a href=\"api/animations/AnimationOptions\" class=\"code-anchor\">AnimationOptions</a> = null): <a href=\"api/animations/AnimationTransitionMetadata\" class=\"code-anchor\">AnimationTransitionMetadata</a></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table function-overload-parameters\">\n <tbody>\n \n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>stateChangeExpr</code>\n </td>\n <td class=\"param-type\"><code>string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean)</code></td>\n <td class=\"param-description\">\n <p>A Boolean expression or function that compares the previous and current\nanimation states, and returns true if this transition should occur. Note that \"true\" and \"false\"\nmatch 1 and 0, respectively. An expression is evaluated each time a state change occurs in the\nanimation trigger element.\nThe animation steps run when the expression evaluates to true.</p>\n<ul>\n<li>\n<p>A state-change string takes the form \"state1 => state2\", where each side is a defined animation\nstate, or an asterix (*) to refer to a dynamic start or end state.</p>\n<ul>\n<li>The expression string can contain multiple comma-separated statements;\nfor example \"state1 => state2, state3 => state4\".</li>\n<li>Special values <code>:enter</code> and <code>:leave</code> initiate a transition on the entry and exit states,\nequivalent to \"void => <em>\" and \"</em> => void\".</li>\n<li>Special values <code>:increment</code> and <code>:decrement</code> initiate a transition when a numeric value has\nincreased or decreased in value.</li>\n</ul>\n</li>\n<li>A function is executed each time a state change occurs in the animation trigger element.\nThe animation steps run when the function returns true.</li>\n</ul>\n\n </td>\n </tr>\n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>steps</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/animations/AnimationMetadata\" class=\"code-anchor\">AnimationMetadata</a> | <a href=\"api/animations/AnimationMetadata\" class=\"code-anchor\">AnimationMetadata</a>[]</code></td>\n <td class=\"param-description\">\n <p>One or more animation objects, as returned by the <code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>()</code> or\n<code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a>()</code> function, that form a transformation from one state to another.\nA sequence is used by default when you pass an array.</p>\n\n </td>\n </tr>\n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>options</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/animations/AnimationOptions\" class=\"code-anchor\">AnimationOptions</a></code></td>\n <td class=\"param-description\">\n <p>An options object that can contain a delay value for the start of the animation,\nand additional developer-defined parameters. Provided values for additional parameters are used\nas defaults, and override values can be passed to the caller on invocation.</p>\n<p> Optional. Default is <code>null</code>.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code><a href=\"api/animations/AnimationTransitionMetadata\" class=\"code-anchor\">AnimationTransitionMetadata</a></code>: An object that encapsulates the transition data.</p>\n \n \n\n\n \n\n \n</div>\n\n\n \n\n \n\n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <p>The template associated with a component binds an animation trigger to an element.</p>\n<code-example language=\"HTML\">\n<!-- somewhere inside of my-component-tpl.html -->\n<div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n</code-example>\n<p>All transitions are defined within an animation trigger,\nalong with named states that the transitions change to and from.</p>\n<code-example language=\"typescript\">\n<a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>(\"myAnimationTrigger\", [\n // define states\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>(\"on\", <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ background: \"green\" })),\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>(\"off\", <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ background: \"grey\" })),\n ...]\n</code-example>\n<p>Note that when you call the <code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a>()</code> function within a <code><a href=\"api/animations/group\">group()</a></code>\nor a <code><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>()</code> call, execution does not continue to the next instruction\nuntil each of the inner animation steps have completed.</p>\n<h3 id=\"syntax-examples\">Syntax examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#syntax-examples\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following examples define transitions between the two defined states (and default states),\nusing various options:</p>\n<code-example language=\"typescript\">\n// Transition occurs when the <a href=\"api/animations/state\" class=\"code-anchor\">state</a> value\n// bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\"on => off\", <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500))\n// Run the same <a href=\"api/animations/animation\" class=\"code-anchor\">animation</a> for both directions\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\"on <=> off\", <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500))\n// Define <a href=\"api/forms/SelectMultipleControlValueAccessor\" class=\"code-anchor\">multiple</a> state-change pairs separated by commas\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\"on => off, off => void\", <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500))\n</code-example>\n<h3 id=\"special-values-for-state-change-expressions\">Special values for state-change expressions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#special-values-for-state-change-expressions\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li>Catch-all state change for when an element is inserted into the page and the\ndestination state is unknown:</li>\n</ul>\n<code-example language=\"typescript\">\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\"void => *\", [\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ opacity: 0 }),\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500)\n ])\n</code-example>\n<ul>\n<li>\n<p>Capture a state change between any states:</p>\n<p><code><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\"* => *\", <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(\"1s 0s\"))</code></p>\n</li>\n<li>\n<p>Entry and exit transitions:</p>\n</li>\n</ul>\n<code-example language=\"typescript\">\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\":enter\", [\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ opacity: 0 }),\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500, <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ opacity: 1 }))\n ]),\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\":leave\", [\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500, <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ opacity: 0 }))\n ])\n</code-example>\n<ul>\n<li>Use <code>:increment</code> and <code>:decrement</code> to initiate transitions:</li>\n</ul>\n<code-example language=\"typescript\">\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\":increment\", group([\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(':enter', [\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ left: '100%' }),\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('0.5s ease-out', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>('*'))\n ]),\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(':leave', [\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('0.5s ease-out', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ left: '-100%' }))\n ])\n]))\n\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\":decrement\", group([\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(':enter', [\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ left: '100%' }),\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('0.5s ease-out', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>('*'))\n ]),\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(':leave', [\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('0.5s ease-out', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ left: '-100%' }))\n ])\n]))\n</code-example>\n<h3 id=\"state-change-functions\">State-change functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#state-change-functions\"><i class=\"material-icons\">link</i></a></h3>\n<p>Here is an example of a <code>fromState</code> specified as a state-change function that invokes an\nanimation when true:</p>\n<code-example language=\"typescript\">\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>((fromState, toState) =>\n {\n return fromState == \"off\" && toState == \"on\";\n },\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(\"1s 0s\"))\n</code-example>\n<h3 id=\"animating-to-the-final-state\">Animating to the final state<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#animating-to-the-final-state\"><i class=\"material-icons\">link</i></a></h3>\n<p>If the final step in a transition is a call to <code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>()</code> that uses a timing value\nwith no style data, that step is automatically considered the final animation arc,\nfor the element to reach the final state. Angular automatically adds or removes\nCSS styles to ensure that the element is in the correct final state.</p>\n<p>The following example defines a transition that starts by hiding the element,\nthen makes sure that it animates properly to whatever state is currently active for trigger:</p>\n<code-example language=\"typescript\">\n<a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>(\"void => *\", [\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ opacity: 0 }),\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500)\n ])\n</code-example>\n<h3 id=\"boolean-value-matching\">Boolean value matching<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/transition#boolean-value-matching\"><i class=\"material-icons\">link</i></a></h3>\n<p>If a trigger binding value is a Boolean, it can be matched using a transition expression\nthat compares true and false or 1 and 0. For example:</p>\n<code-example>\n// in the template\n<div [@openClose]=\"open ? true : false\">...</div>\n// in the component metadata\n<a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>('openClose', [\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>('true', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ height: '*' })),\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>('false', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ height: '0px' })),\n <a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>('false <=> true', <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500))\n])\n</code-example>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/animations\n - api/animations/AnimationMetadataType\n - api/animations/AnimationOptions\n - api/animations/AnimationTransitionMetadata\n - api/animations/animate\n - api/animations/group\n - api/animations/query\n - api/animations/sequence\n - api/animations/stagger\n - api/animations/state\n - api/animations/trigger\n - api/core/Component\n - guide/animations\n - guide/complex-animation-sequences\n - guide/elements\n - guide/reusable-animations\n - guide/route-animations\n - guide/router-tutorial-toh\n - guide/transition-and-triggers\n-->\n<!-- links from this doc:\n - /api\n - api/animations\n - api/animations/AnimationMetadata\n - api/animations/AnimationOptions\n - api/animations/AnimationTransitionMetadata\n - api/animations/animate\n - api/animations/animation\n - api/animations/group\n - api/animations/query\n - api/animations/sequence\n - api/animations/state\n - api/animations/style\n - api/animations/transition#animating-to-the-final-state\n - api/animations/transition#boolean-value-matching\n - api/animations/transition#special-values-for-state-change-expressions\n - api/animations/transition#state-change-functions\n - api/animations/transition#syntax-examples\n - api/animations/transition#transition\n - api/animations/transition#usage-notes\n - api/animations/trigger\n - api/forms/SelectMultipleControlValueAccessor\n - https://github.com/angular/angular/edit/master/packages/animations/src/animation_metadata.ts?message=docs(animations)%3A%20describe%20your%20change...#L872-L1047\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/src/animation_metadata.ts#L872-L1047\n-->"
|
|
} |