填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

@angular/animations

Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as multiple transformations over time.

Use this API to define how an HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each of these transformations. The function calls generate the data structures and metadata that enable Angular to integrate animations into templates and run them based on application states.

Animation definitions are linked to components through the animations property in the @Component metadata, typically in the component file of the HTML element to be animated. The trigger() function encapsulates a named animation, with all other function calls nested within. Use the trigger name to bind the named animation to a specific triggering element in the HTML template.

Angular animations are based on CSS web transition functionality, so anything that can be styled or transformed in CSS can be animated the same way in Angular. Angular animations allow you to:

  • Set animation timings, styles, keyframes, and transitions.
  • Animate HTML elements in complex sequences and choreographies.
  • Animate HTML elements as they are inserted and removed from the DOM, including responsive real-time filtering.
  • Create reusable animations.
  • Animate parent and child elements.

Additional animation functionality is provided in other Angular modules for animation testing, for route-based animations, and for programmatic animation controls that allow an end user to fast forward and reverse an animation sequence.

參見

入口點

Entry points

主要

Primary

@angular/animations

Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as multiple transformations over time.

次要

Secondary

@angular/animations/browser

Provides infrastructure for cross-platform rendering of animations in a browser.

@angular/animations/browser/testing

Provides infrastructure for testing of the Animations browser subsystem.

主要入口點的匯出

Primary entry point exports

類別

Classes

AnimationBuilder

一種可注入服務,可在 Angular 元件或指令中以程式設計的方式產生動畫序列。由 BrowserAnimationsModuleNoopAnimationsModule 提供。

An injectable service that produces an animation sequence programmatically within an Angular component or directive. Provided by the BrowserAnimationsModule or NoopAnimationsModule.

AnimationFactory

AnimationBuilder.build() 方法返回的工廠物件。。

A factory object returned from the AnimationBuilder.build() method.

NoopAnimationPlayer

用於可複用動畫的空白程式控制器。當禁用動畫時在內部使用,以免在要用動畫播放器時檢查其是否為 null。

An empty programmatic controller for reusable animations. Used internally when animations are disabled, to avoid checking for the null case when an animation player is expected.

函式

Functions

animate

定義一個動畫步驟,它把一些樣式資訊和時序資訊組合在一起。

Defines an animation step that combines styling information with timing information.

animateChild

在一個動畫序列中執行一個查詢到的內部動畫元素。

Executes a queried inner animation element within an animation sequence.

animation

產生一個可複用的動畫,可以在其它動畫或序列中透過 useAnimation() 函式進行呼叫。

Produces a reusable animation that can be invoked in another animation or sequence, by calling the useAnimation() function.

group

定義一個可以並行執行的動畫步驟列表。

Defines a list of animation steps to be run in parallel.

keyframes

可定義一組動畫樣式,每個樣式都關聯著一個可選的 offset 值。

Defines a set of animation styles, associating each style with an optional offset value.

query

在動畫序列中正在播放的元素中查詢一個或多個內部元素。和 animateChild() 一起使用。

Finds one or more inner elements within the current element that is being animated within a sequence. Use with animate().

sequence

定義一個動畫步驟列表,逐個依次執行它們。

Defines a list of animation steps to be run sequentially, one by one.

stagger

在呼叫 query() 中使用可以在每個查詢到的條目開始播放動畫之後插入一個時間間隔。

Use within an animation query() call to issue a timing gap after each queried item is animated.

state

在附加到元素的觸發器上,宣告一個動畫狀態。

Declares an animation state within a trigger attached to an element.

style

宣告一個包含 CSS 屬性/樣式的鍵值物件,可在動畫序列中用作動畫狀態(state),或在呼叫 animate()keyframes() 時作為傳入的樣式資料。

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().

transition

宣告一個轉場動畫,以便在滿足給定條件時執行一系列動畫步驟。該條件是一個邏輯型表示式或一個函式, 該函式比較以前和現在的動畫狀態,如果應該開始轉場則返回 true。 當滿足所定義的轉場動畫的狀態標準時,就會開始執行相關的動畫。

Declares an animation transition as a sequence of animation steps to run when a given condition is satisfied. The condition is a Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. When the state criteria of a defined transition are met, the associated animation is triggered.

trigger

建立一個有名字的動畫觸發器,包含一個 state()transition() 的列表,當此觸發器的繫結表示式發生變化時,它們就會重新求值。

Creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes.

useAnimation

啟動一個使用 animation() 函式建立的可複用動畫。

Starts a reusable animation that is created using the animation() function.

結構

Structures

AnimateChildOptions

新增持續時間選項,以控制子動畫的動畫樣式和時序。

Adds duration options to control animation styling and timing for a child animation.

AnimationAnimateChildMetadata

封裝一個子動畫,父動畫可以顯式的執行它。 由 animateChild 函式進行初始化和返回。

Encapsulates a child animation, that can be run explicitly when the parent is run. Instantiated and returned by the animateChild function.

AnimationAnimateMetadata

封裝一個動畫步驟。由 animate() 函式進行實例化並返回。

Encapsulates an animation step. Instantiated and returned by the animate() function.

AnimationAnimateRefMetadata

封裝一個可複用的動畫。 由 useAnimation() 函式實例化並返回。

Encapsulates a reusable animation. Instantiated and returned by the useAnimation() function.

AnimationEvent

在開始或完成階段呼叫已捕獲動畫的回呼(Callback)時,將此類別的實例作為事件引數返回。

An instance of this class is returned as an event parameter when an animation callback is captured for an animation either during the start or done phase.

AnimationGroupMetadata

封裝一個動畫組。 由 group() 函式實例化並返回。

Encapsulates an animation group. Instantiated and returned by the group() function.

AnimationKeyframesSequenceMetadata

封裝一個關鍵幀序列。由 keyframes() 函式進行實例化並返回。

Encapsulates a keyframes sequence. Instantiated and returned by the keyframes() function.

AnimationMetadata

動畫資料結構的基底類別。

Base for animation data structures.

AnimationMetadataType

一組可以為動畫定義引數類別的常量。

Constants for the categories of parameters that can be defined for animations.

AnimationOptions

用來控制動畫樣式和時序的選項。

Options that control animation styling and timing.

AnimationPlayer

提供對可複用動畫序列的程式設計控制,該動畫序列是使用 AnimationBuilderbuild() 方法建構的。 build() 方法返回一個工廠,其 create() 方法將實例化並初始化此介面。

Provides programmatic control of a reusable animation sequence, built using the build() method of AnimationBuilder. The build() method returns a factory, whose create() method instantiates and initializes this interface.

AnimationQueryMetadata

封裝一個動畫查詢。由 query() 函式實例化並返回。

Encapsulates an animation query. Instantiated and returned by the query() function.

AnimationQueryOptions

封裝一些動畫查詢選項。 傳給 query() 函式。

Encapsulates animation query options. Passed to the query() function.

AnimationReferenceMetadata

封裝一個可複用的動畫,包括一組獨立的動畫步驟。由 animation() 函式返回,並傳給 useAnimation() 函式。

Encapsulates a reusable animation, which is a collection of individual animation steps. Instantiated and returned by the animation() function, and passed to the useAnimation() function.

AnimationSequenceMetadata

封裝一個動畫序列。 由 sequence() 函式進行實例化並返回。

Encapsulates an animation sequence. Instantiated and returned by the sequence() function.

AnimationStaggerMetadata

封裝一組動畫步驟的起始時間的交錯引數。 由 stagger() 函式實例化並返回。

Encapsulates parameters for staggering the start times of a set of animation steps. Instantiated and returned by the stagger() function.

AnimationStateMetadata

透過將狀態名稱和一組 CSS 樣式相關聯來封裝一個動畫狀態。 由 state() 函式實例化並返回。

Encapsulates an animation state by associating a state name with a set of CSS styles. Instantiated and returned by the state() function.

AnimationStyleMetadata

封裝一個動畫樣式。由 style() 函式實例化並返回。

Encapsulates an animation style. Instantiated and returned by the style() function.

AnimationTransitionMetadata

封裝一個轉場動畫。由 transition() 函式實例化並返回。

Encapsulates an animation transition. Instantiated and returned by the transition() function.

AnimationTriggerMetadata

包含一個動畫觸發器。由 trigger() 函式實例化並返回。

Contains an animation trigger. Instantiated and returned by the trigger() function.

型別

Types

AUTO_STYLE

用於指定自動化樣式。

Specifies automatic styling.

AnimateTimings

表示一個動畫步驟中的動畫時序引數。

Represents animation-step timing parameters for an animation step.