5 lines
29 KiB
JSON
5 lines
29 KiB
JSON
{
|
|
"id": "api/animations/animate",
|
|
"title": "animate",
|
|
"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/animate\", \"name\": \"animate\" } }\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...#L603-L667\" 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#L603-L667\" 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=\"animate\">animate<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/animate#animate\"><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>Defines an animation step that combines styling information with timing information.</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/animate\" class=\"code-anchor\">animate</a></span>(timings: string | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>, styles: <a href=\"api/animations/AnimationStyleMetadata\" class=\"code-anchor\">AnimationStyleMetadata</a> | <a href=\"api/animations/AnimationKeyframesSequenceMetadata\" class=\"code-anchor\">AnimationKeyframesSequenceMetadata</a> = null): <a href=\"api/animations/AnimationAnimateMetadata\" class=\"code-anchor\">AnimationAnimateMetadata</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>timings</code>\n </td>\n <td class=\"param-type\"><code>string | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code></td>\n <td class=\"param-description\">\n <p>Sets <code><a href=\"api/animations/AnimateTimings\" class=\"code-anchor\">AnimateTimings</a></code> for the parent animation.\nA string in the format \"duration [delay][easing]\".</p>\n<ul>\n<li>Duration and delay are expressed as a number and optional time unit,\nsuch as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\nThe default unit is milliseconds.</li>\n<li>The easing value controls how the animation accelerates and decelerates\nduring its runtime. Value is one of <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>,\n<code>ease-in-out</code>, or a <code>cubic-bezier()</code> function call.\nIf not supplied, no easing is applied.</li>\n</ul>\n<p>For example, the string \"1s 100ms ease-out\" specifies a duration of\n1000 milliseconds, and delay of 100 ms, and the \"ease-out\" easing style,\nwhich decelerates near the end of the duration.</p>\n\n </td>\n </tr>\n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>styles</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/animations/AnimationStyleMetadata\" class=\"code-anchor\">AnimationStyleMetadata</a> | <a href=\"api/animations/AnimationKeyframesSequenceMetadata\" class=\"code-anchor\">AnimationKeyframesSequenceMetadata</a></code></td>\n <td class=\"param-description\">\n <p>Sets AnimationStyles for the parent animation.\nA function call to either <code><a href=\"api/animations/style\" class=\"code-anchor\">style</a>()</code> or <code><a href=\"api/animations/keyframes\" class=\"code-anchor\">keyframes</a>()</code>\nthat returns a collection of CSS style entries to be applied to the parent animation.\nWhen null, uses the styles from the destination state.\nThis is useful when describing an animation step that will complete an animation;\nsee \"Animating to the final state\" in <code>transitions()</code>.</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/AnimationAnimateMetadata\" class=\"code-anchor\">AnimationAnimateMetadata</a></code>: An object that encapsulates the animation step.</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/animate#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <p>Call within an animation <code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a>()</code>, <code><a href=\"api/animations/group\">group()</a></code>, or\n<code><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>()</code> call to specify an animation step\nthat applies given style data to the parent animation for a given amount of time.</p>\n<h3 id=\"syntax-examples\">Syntax Examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/animate#syntax-examples\"><i class=\"material-icons\">link</i></a></h3>\n<p><strong>Timing examples</strong></p>\n<p>The following examples show various <code>timings</code> specifications.</p>\n<ul>\n<li><code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500)</code> : Duration is 500 milliseconds.</li>\n<li><code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(\"1s\")</code> : Duration is 1000 milliseconds.</li>\n<li><code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(\"100ms 0.5s\")</code> : Duration is 100 milliseconds, delay is 500 milliseconds.</li>\n<li><code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(\"5s ease-in\")</code> : Duration is 5000 milliseconds, easing in.</li>\n<li><code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\")</code> : Duration is 5000 milliseconds, delay is 10\nmilliseconds, easing according to a bezier curve.</li>\n</ul>\n<p><strong>Style examples</strong></p>\n<p>The following example calls <code><a href=\"api/animations/style\" class=\"code-anchor\">style</a>()</code> to set a single CSS style.</p>\n<code-example language=\"typescript\">\n<a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500, <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ background: \"red\" }))\n</code-example>\n<p>The following example calls <code><a href=\"api/animations/keyframes\" class=\"code-anchor\">keyframes</a>()</code> to set a CSS style\nto different values for successive keyframes.</p>\n<code-example language=\"typescript\">\n<a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>(500, <a href=\"api/animations/keyframes\" class=\"code-anchor\">keyframes</a>(\n [\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ background: \"blue\" }),\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({ background: \"red\" })\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/AnimateTimings\n - api/animations/AnimationAnimateMetadata\n - api/animations/AnimationBuilder\n - api/animations/AnimationMetadataType\n - api/animations/AnimationPlayer\n - api/animations/NoopAnimationPlayer\n - api/animations/animation\n - api/animations/browser/AnimationDriver\n - api/animations/browser/testing/MockAnimationDriver\n - api/animations/group\n - api/animations/keyframes\n - api/animations/query\n - api/animations/sequence\n - api/animations/stagger\n - api/animations/style\n - api/animations/transition\n - guide/animations\n - guide/complex-animation-sequences\n - guide/elements\n - guide/migration-renderer\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/AnimateTimings\n - api/animations/AnimationAnimateMetadata\n - api/animations/AnimationKeyframesSequenceMetadata\n - api/animations/AnimationStyleMetadata\n - api/animations/animate#animate\n - api/animations/animate#syntax-examples\n - api/animations/animate#usage-notes\n - api/animations/group\n - api/animations/keyframes\n - api/animations/sequence\n - api/animations/style\n - api/animations/transition\n - api/common/DecimalPipe\n - https://github.com/angular/angular/edit/master/packages/animations/src/animation_metadata.ts?message=docs(animations)%3A%20describe%20your%20change...#L603-L667\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/src/animation_metadata.ts#L603-L667\n-->"
|
|
} |