\r\n *
Title
\r\n *
\r\n * Blah blah blah\r\n *
\r\n *
...
\r\n * ```\r\n *\r\n * All transitions are defined within an animation trigger,\r\n * along with named states that the transitions change to and from.\r\n *\r\n * ```typescript\r\n * trigger(\"myAnimationTrigger\", [\r\n * // define states\r\n * state(\"on\", style({ background: \"green\" })),\r\n * state(\"off\", style({ background: \"grey\" })),\r\n * ...]\r\n * ```\r\n *\r\n * Note that when you call the `sequence()` function within a `{@link animations/group group()}`\r\n * or a `transition()` call, execution does not continue to the next instruction\r\n * until each of the inner animation steps have completed.\r\n *\r\n * ### Syntax examples\r\n *\r\n * The following examples define transitions between the two defined states (and default states),\r\n * using various options:\r\n *\r\n * ```typescript\r\n * // Transition occurs when the state value\r\n * // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\r\n * transition(\"on => off\", animate(500))\r\n * // Run the same animation for both directions\r\n * transition(\"on <=> off\", animate(500))\r\n * // Define multiple state-change pairs separated by commas\r\n * transition(\"on => off, off => void\", animate(500))\r\n * ```\r\n *\r\n * ### Special values for state-change expressions\r\n *\r\n * - Catch-all state change for when an element is inserted into the page and the\r\n * destination state is unknown:\r\n *\r\n * ```typescript\r\n * transition(\"void => *\", [\r\n * style({ opacity: 0 }),\r\n * animate(500)\r\n * ])\r\n * ```\r\n *\r\n * - Capture a state change between any states:\r\n *\r\n * `transition(\"* => *\", animate(\"1s 0s\"))`\r\n *\r\n * - Entry and exit transitions:\r\n *\r\n * ```typescript\r\n * transition(\":enter\", [\r\n * style({ opacity: 0 }),\r\n * animate(500, style({ opacity: 1 }))\r\n * ]),\r\n * transition(\":leave\", [\r\n * animate(500, style({ opacity: 0 }))\r\n * ])\r\n * ```\r\n *\r\n * - Use `:increment` and `:decrement` to initiate transitions:\r\n *\r\n * ```typescript\r\n * transition(\":increment\", group([\r\n * query(':enter', [\r\n * style({ left: '100%' }),\r\n * animate('0.5s ease-out', style('*'))\r\n * ]),\r\n * query(':leave', [\r\n * animate('0.5s ease-out', style({ left: '-100%' }))\r\n * ])\r\n * ]))\r\n *\r\n * transition(\":decrement\", group([\r\n * query(':enter', [\r\n * style({ left: '100%' }),\r\n * animate('0.5s ease-out', style('*'))\r\n * ]),\r\n * query(':leave', [\r\n * animate('0.5s ease-out', style({ left: '-100%' }))\r\n * ])\r\n * ]))\r\n * ```\r\n *\r\n * ### State-change functions\r\n *\r\n * Here is an example of a `fromState` specified as a state-change function that invokes an\r\n * animation when true:\r\n *\r\n * ```typescript\r\n * transition((fromState, toState) =>\r\n * {\r\n * return fromState == \"off\" && toState == \"on\";\r\n * },\r\n * animate(\"1s 0s\"))\r\n * ```\r\n *\r\n * ### Animating to the final state\r\n *\r\n * If the final step in a transition is a call to `animate()` that uses a timing value\r\n * with no style data, that step is automatically considered the final animation arc,\r\n * for the element to reach the final state. Angular automatically adds or removes\r\n * CSS styles to ensure that the element is in the correct final state.\r\n *\r\n * The following example defines a transition that starts by hiding the element,\r\n * then makes sure that it animates properly to whatever state is currently active for trigger:\r\n *\r\n * ```typescript\r\n * transition(\"void => *\", [\r\n * style({ opacity: 0 }),\r\n * animate(500)\r\n * ])\r\n * ```\r\n * ### Boolean value matching\r\n * If a trigger binding value is a Boolean, it can be matched using a transition expression\r\n * that compares true and false or 1 and 0. For example:\r\n *\r\n * ```\r\n * // in the template\r\n * ...
\r\n * // in the component metadata\r\n * trigger('openClose', [\r\n * state('true', style({ height: '*' })),\r\n * state('false', style({ height: '0px' })),\r\n * transition('false <=> true', animate(500))\r\n * ])\r\n * ```\r\n *\r\n * @publicApi\r\n **/\r\nexport declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {\r\n [key: string]: any;\r\n}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;\r\n\r\n/**\r\n * Creates a named animation trigger, containing a list of `state()`\r\n * and `transition()` entries to be evaluated when the expression\r\n * bound to the trigger changes.\r\n *\r\n * @param name An identifying string.\r\n * @param definitions An animation definition object, containing an array of `state()`\r\n * and `transition()` declarations.\r\n *\r\n * @return An object that encapsulates the trigger data.\r\n *\r\n * @usageNotes\r\n * Define an animation trigger in the `animations` section of `@Component` metadata.\r\n * In the template, reference the trigger by name and bind it to a trigger expression that\r\n * evaluates to a defined animation state, using the following format:\r\n *\r\n * `[@triggerName]=\"expression\"`\r\n *\r\n * Animation trigger bindings convert all values to strings, and then match the\r\n * previous and current values against any linked transitions.\r\n * Booleans can be specified as `1` or `true` and `0` or `false`.\r\n *\r\n * ### Usage Example\r\n *\r\n * The following example creates an animation trigger reference based on the provided\r\n * name value.\r\n * The provided animation value is expected to be an array consisting of state and\r\n * transition declarations.\r\n *\r\n * ```typescript\r\n * @Component({\r\n * selector: \"my-component\",\r\n * templateUrl: \"my-component-tpl.html\",\r\n * animations: [\r\n * trigger(\"myAnimationTrigger\", [\r\n * state(...),\r\n * state(...),\r\n * transition(...),\r\n * transition(...)\r\n * ])\r\n * ]\r\n * })\r\n * class MyComponent {\r\n * myStatusExp = \"something\";\r\n * }\r\n * ```\r\n *\r\n * The template associated with this component makes use of the defined trigger\r\n * by binding to an element within its template code.\r\n *\r\n * ```html\r\n * \r\n * ...
\r\n * ```\r\n *\r\n * ### Using an inline function\r\n * The `transition` animation method also supports reading an inline function which can decide\r\n * if its associated animation should be run.\r\n *\r\n * ```typescript\r\n * // this method is run each time the `myAnimationTrigger` trigger value changes.\r\n * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:\r\n string]: any}): boolean {\r\n * // notice that `element` and `params` are also available here\r\n * return toState == 'yes-please-animate';\r\n * }\r\n *\r\n * @Component({\r\n * selector: 'my-component',\r\n * templateUrl: 'my-component-tpl.html',\r\n * animations: [\r\n * trigger('myAnimationTrigger', [\r\n * transition(myInlineMatcherFn, [\r\n * // the animation sequence code\r\n * ]),\r\n * ])\r\n * ]\r\n * })\r\n * class MyComponent {\r\n * myStatusExp = \"yes-please-animate\";\r\n * }\r\n * ```\r\n *\r\n * ### Disabling Animations\r\n * When true, the special animation control binding `@.disabled` binding prevents\r\n * all animations from rendering.\r\n * Place the `@.disabled` binding on an element to disable\r\n * animations on the element itself, as well as any inner animation triggers\r\n * within the element.\r\n *\r\n * The following example shows how to use this feature:\r\n *\r\n * ```typescript\r\n * @Component({\r\n * selector: 'my-component',\r\n * template: `\r\n *