angular示例

為什么要使用動畫？ (Why use Animations?)

Modern web components frequently use animations. Cascading Style-sheets (CSS) arms developers with the tools to create impressive animations. Property transitions, uniquely named animations, multi-part keyframes are possible with CSS. The animatable possibilities are endless thanks to CSS.

現代的Web組件經常使用動畫。級聯樣式表(CSS)為開發人員提供了創建令人印象深刻的動畫的工具。使用CSS可以進行屬性轉換，唯一命名的動畫，多部分關鍵幀。借助CSS，可實現動畫的可能性無窮無盡。

In a modern web application, animation focuses the user’s attention. Good animations seek to guide the user’s attention in a satisfying, productive manner. Animations should not prove annoying to the user.

在現代的Web應用程序中，動畫會吸引用戶的注意力。好的動畫試圖以令人滿意的，富有成效的方式引導用戶的注意力。動畫不應對用戶造成困擾。

Animations offer feedback in the form of movement. They show the user that the application is actively handling their requests. Something as simple as a visible button press or a loader when the application must load engages the user’s attention.

動畫以運動形式提供反饋。它們向用戶顯示該應用程序正在積極處理他們的請求。當必須加載應用程序時，諸如可見按鈕按下或加載程序之類的簡單操作就引起了用戶的注意。

Animations continue to grow more and more relevant in Angular’s case. Google develops Angular while promoting the Material Design philosophy. It encourages concise user interfaces (UI) supplemented with animated user feedback. It makes web applications feel somewhat alive and fun to use.

在Angular的案例中，動畫的重要性越來越高。 Google在推廣材料設計理念的同時開發了Angular。它鼓勵簡潔的用戶界面(UI)，并帶有動畫用戶反饋。它使Web應用程序感到有些活躍和有趣。

The Angular community develops a core widget library called Material2. This project adds a variety of widget modules to Angular. Most of them feature animations. To understand how they work, this article recommends studying CSS animations before reading on.

Angular社區開發了一個名為Material2的核心小部件庫。該項目向Angular添加了各種小部件模塊。它們大多數具有動畫。為了理解它們的工作原理，本文建議在繼續閱讀之前研究CSS動畫。

Angular animations is the framework’s streamlined version of what CSS natively provides. CSS is the core technology for Angular animations occurring within the web browser. CSS is beyond the scope of this article though. Its time to tackle Angular animations head-on.

角動畫是CSS原生提供的框架的簡化版本。 CSS是Web瀏覽器中發生的Angular動畫的核心技術。 CSS超出了本文的范圍。是時候直接解決Angular動畫了。

設置動畫 (Setting up Animations)

Before animating, the BrowserAnimationsModule must include into the root module’s imports array. It is available from @angular/platform-browser/animations. This NgModule ensures animations work for the given platform. This article assumes the standard web browser for each example.

設置動畫之前， BrowserAnimationsModule必須包含在根模塊的imports數組中。可從@angular/platform-browser/animations 。此NgModule可確保動畫在給定平臺上正常工作。本文假定每個示例都使用標準的Web瀏覽器。

Angular animations declare within the @Component metadata. @Component decorates a class to distinguish it as a component to Angular. Its metadata contains component configurations including the animations: [] field. Each array element from this field represents an animation trigger (AnimationTriggerMetadata).

角動畫在@Component元數據中聲明。 @Component裝飾一個類以將其區分為Angular的組件。它的元數據包含組件配置，其中包括animations: []字段。此字段中的每個數組元素都表示一個動畫觸發器( AnimationTriggerMetadata )。

Animations are exclusive to their host component via the decorator’s metadata. Animations can only be used in the host component’s template. Animations do not inherit to the component’s children. There is an easy work-around for this.

動畫通過裝飾器的元數據對其宿主組件具有獨占性。動畫只能在宿主組件的模板中使用。動畫不會繼承到組件的子代。有一個簡單的解決方法。

You could always create a separate file that exports an array. Any component class can import that array from the top of its host file. The imported array token then goes into the animations metadata of the component. Repeat this process for any other components requiring the same array in their animations metadata.

您總是可以創建一個單獨的文件來導出數組。任何組件類都可以從其主機文件的頂部導入該數組。然后，導入的數組標記將進入組件的動畫元數據。對在其動畫元數據中需要相同數組的任何其他組件重復此過程。

Content projection lets you apply animations to component A’s content DOM (Document Object Model). Component B wrapping this content DOM can project the contents into its own template. Once it does, the animations of component A do not negate. Component B incorporates A’s animations through content projection.

內容投影使您可以將動畫應用于組件A的內容DOM(文檔對象模型)。包裝此內容DOM的組件B可以將內容投影到其自己的模板中。一旦完成，組件A的動畫就不會否定。組件B通過內容投影合并了A的動畫。

OK. You know how to setup animations and where to declare them. Implementation is the next step.

好。您知道如何設置動畫以及在哪里聲明它們。實施是下一步。

動畫方法 (Animation Methods)

Angular animations use a series of method calls importable from @angular/animations. Each element of the @Component animations array begins as a single method. Its arguments unravel as a sequence of higher-order method calls. The following list shows some of the methods used to build Angular animations.

角動畫使用一系列可從@angular/animations導入的方法調用。 @Component animations數組的每個元素都以單個方法開始。它的參數分解為一系列高階方法調用。以下列表顯示了一些用于構建Angular動畫的方法。

trigger(selector: string, AnimationMetadata[])
trigger(selector: string, AnimationMetadata[])

returns AnimationTriggerMetadata

返回AnimationTriggerMetadata

state(data: string, AnimationStyleMetadata, options?: object)
state(data: string, AnimationStyleMetadata, options?: object)

returns AnimationStateMetadata

返回AnimationStateMetadata

style(CSSKeyValues: object)
style(CSSKeyValues: object)

returns AnimationStyleMetadata

返回AnimationStyleMetadata

animate(timing: string|number, AnimationStyleMetadata|KeyframesMetadata)
animate(timing: string|number, AnimationStyleMetadata|KeyframesMetadata)

returns AnimationAnimateMetadata

返回AnimationAnimateMetadata

transition(stateChange: string, AnimationMetadata|AnimationMetadata[], options?: object)
transition(stateChange: string, AnimationMetadata|AnimationMetadata[], options?: object)

returns AnimationTransitionMetadata

返回AnimationTransitionMetadata

While there are certainly more methods to pick from, these five methods handle the basics. Trying to understand these core methods as a list does not help very much. Bullet-by-bullet explanations followed by an example will make better sense of it.

雖然肯定有更多方法可供選擇，但這五種方法可以處理基礎知識。嘗試將這些核心方法理解為列表沒有太大幫助。逐個子彈的解釋以及后面的示例將使它更好地理解。

觸發器(選擇器：字符串，AnimationMetadata []) (trigger(selector: string, AnimationMetadata[]))

The trigger(...) method encapsulates a single element of animation inside the animations array.

trigger(...)方法將單個動畫元素封裝在animations數組內。

The method’s first argument selector: string matches the [@selector] member attribute. It acts like an attribute directive in the component template. It essentially connects the animation element to the template through an attribute selector.

方法的第一個參數selector: string與[@selector]成員屬性匹配。它就像組件模板中的屬性指令一樣。它實質上是通過屬性選擇器將動畫元素連接到模板。

The second argument is an array containing a list of applicable animation methods. The trigger(...) keeps it altogether in a single array.

第二個參數是一個數組，其中包含適用的動畫方法列表。 trigger(...)將其完全保留在單個數組中。

狀態(數據：字符串，AnimationStyleMetadata，選項？：對象) (state(data: string, AnimationStyleMetadata, options?: object))

The state(...) method defines the final state of the animation. It applies a list of CSS properties to the target element after an animation concludes. This is so the animated element’s CSS matches the animation’s resolution.

state(...)方法定義動畫的最終狀態。動畫結束后，它將CSS屬性列表應用于目標元素。因此，動畫元素CSS與動畫的分辨率匹配。

The first argument matches the value of the data bound to the animation binding. That is, the value bound to [@selector] in the template matches against first argument of a state(...). The data’s value determines the final state. The changing of the value determines the means of animation (see transition(...)).

第一個參數與綁定到動畫綁定的數據的值匹配。也就是說，模板中綁定到[@selector]的值與state(...)第一個參數匹配。數據的值確定最終狀態。值的更改確定動畫的方式(請參見transition(...) )。

The second argument hosts the CSS styles that apply to an element post-animation. Styles get passed in by invoking style(...) and passing into its argument the desired styles as an object.

第二個參數包含適用于元素動畫后CSS樣式。通過調用style(...)并將所需的樣式作為對象傳遞到其參數中來傳遞樣式。

A list of options optionally occupies the third argument. The default state(...) options should remain unchanged unless reasoned otherwise.

選項列表可選地占據第三個參數。除非另有說明，否則默認的state(...)選項應保持不變。

樣式(CSSKeyValues：對象) (style(CSSKeyValues: object))

You may have noticed AnimationStyleMetadata several times in the previous list. The style(...) component returns this exact type of metadata. Wherever CSS styles apply, the style(...) method must invoke. An object containing CSS styles stands-in for its argument.

您可能已經在上一個列表中多次注意到AnimationStyleMetadata 。 style(...)組件返回此確切類型的元數據。無論在哪里應用CSS樣式，都必須調用style(...)方法。包含CSS樣式的對象代表其參數。

Of course, styles animatable in CSS carry over into the Angular style(...) method. Granted, nothing impossible for CSS becomes suddenly possible with Angular animations.

當然，CSS中可設置動畫的樣式會延續到Angular style(...)方法中。當然，使用Angular動畫，CSS不可能實現的一切突然變得不可能。

動畫(定時：字符串|數字，AnimationStyleMetadata | AnimationKeyframesMetadata) (animate(timing: string|number, AnimationStyleMetadata|AnimationKeyframesMetadata))

The animate(...) function accepts a timing expression as its first argument. This argument times, paces, and/or delays the method’s animation. This argument accepts either a number or string expression. The formatting is explained here.

animate(...)函數接受一個計時表達式作為其第一個參數。該參數會設置時間，節奏和/或延遲該方法的動畫。此參數接受數字或字符串表達式。此處說明了格式。

The second argument of animate(...) is the CSS property warranting the animation. This takes the form of the style(...) method which returns AnimationStyleMetadata. Think of animate(...) as the method that initiates the animation.

animate(...)的第二個參數是保證動畫CSS屬性。這采用style(...)方法的形式，該方法返回AnimationStyleMetadata 。將animate(...)視為啟動動畫的方法。

A series of keyframes can also apply to the second argument. Keyframes is a more advanced option that this article explains later on. Keyframes distinguish various sections of the animation.

一系列關鍵幀也可以應用于第二個參數。關鍵幀是本文稍后介紹的更高級的選項。關鍵幀可區分動畫的各個部分。

animate(...) may not receive a second argument. In that case, the method’s animation timing only applies to the CSS reflected in the state(...) methods. Property changes in the trigger’s state(...) methods will animate.

animate(...)可能不會收到第二個參數。在這種情況下，該方法的動畫計時僅適用于state(...)方法中反映CSS。觸發器的state(...)方法中的屬性更改將進行動畫處理。

轉換(changExpr：字符串，AnimationMetadata | AnimationMetadata []，選項？：對象) (transition(changExpr: string, AnimationMetadata|AnimationMetadata[], options?: object))

animate(...) initiates an animation while transition(...) determines which animation initiates.

animate(...)啟動動畫，而transition(...)確定啟動哪個動畫。

The first argument consists of a unique form of micro-syntax. It denotes a change in state (or change in data) taking place. The data bound to the template animation binding ([selector]="value") determines this expression. The upcoming section titled “Animation State” explains this concept a bit further.

第一個參數由微句法的一種獨特形式組成。它表示狀態發生改變(或數據改變)。綁定到模板動畫綁定的數據( [selector]="value" )確定此表達式。接下來的標題為“動畫狀態”的部分進一步解釋了此概念。

The second argument of transition(...) comprises AnimationMetadata (returned by animate(...)). The argument accepts either an array of AnimationMetadata or a single instance.

transition(...)的第二個參數包括AnimationMetadata (由animate(...)返回)。該參數接受AnimationMetadata數組或單個實例。

The first argument’s value matches against the value of the data bound in the template ([selector]="value") . If a perfect match occurs, the argument evaluates successfully. The second argument then initiates an animation in response to the success of the first.

第一個參數的值與模板中綁定的數據的值( [selector]="value" )相匹配。如果出現完美匹配，則參數將成功求值。然后，第二個參數響應第一個參數的成功啟動動畫。

A list of options optionally occupies the third argument. The default transition(...) options should remain unchanged unless reasoned otherwise.

選項列表可選地占據第三個參數。除非另有說明，否則默認的transition(...)選項應保持不變。

動畫范例 (Animation Example)

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';@Component({selector: 'app-example',template: `<h3>Click the button to change its color!</h3><button (click)="toggleIsCorrect()"     // event binding[@toggleClick]="isGreen">Toggle Me!</button>  // animation binding`,animations: [       // metadata arraytrigger('toggleClick', [     // trigger blockstate('true', style({      // final CSS following animationbackgroundColor: 'green'})),state('false', style({backgroundColor: 'red'})),transition('true => false', animate('1000ms linear')),  // animation timingtransition('false => true', animate('1000ms linear'))])]        // end of trigger block
})
export class ExampleComponent {isGreen: string = 'true';toggleIsCorrect() {this.isGreen = this.isGreen === 'true' ? 'false' : 'true'; // change in data-bound value}
}

The above example performs a very simple color swap with each button click. Of course, the color transitions quickly in a linear fade as per animate('1000ms linear'). The animation binds to the button by matching the first argument of trigger(...) to the [@toggleClick] animation binding.

上面的示例在每次單擊按鈕時都執行了非常簡單的顏色交換。當然，每個animate('1000ms linear')的顏色會以線性淡入淡出快速過渡animate('1000ms linear') 。通過將trigger(...)的第一個參數與[@toggleClick]動畫綁定匹配，動畫將綁定到按鈕。

The binding binds to the value of isGreen from the component class. This value determines the resulting color as set by the two style(...) methods inside the trigger(...) block. The animation binding is one-way so that changes to isGreen in the component class notify the template binding. That is, the animation binding [@toggleClick].

綁定綁定到組件類中isGreen的值。該值決定了trigger(...)塊中的兩個style(...)方法所設置的結果顏色。動畫綁定是單向的，因此組件類中對isGreen更改將通知模板綁定。即，動畫綁定[@toggleClick] 。

The button element in the template also has a click event bound to it. Clicking the button causes isGreen to toggle values. This changes the component class data. The animation binding picks up on this and invokes its matching trigger(...) method. The trigger(...) lies within the animations array of the component’s metadata. Two things occur upon the trigger’s invocation.

模板中的button元素還綁定有click事件。單擊按鈕會導致isGreen切換值。這將更改組件類數據。動畫綁定對此進行拾取，并調用其匹配的trigger(...)方法。 trigger(...)位于組件元數據的animations數組內。觸發觸發器時會發生兩件事。

The first occurrence concerns the two state(...) methods. The new value of isGreen matches against a state(...) method’s first argument. Once it matches, the CSS styles of style(...) apply to the final state of the animation binding’s host element. `The final state takes effect following all animation.

第一次出現涉及兩個state(...)方法。 isGreen的新值與state(...)方法的第一個參數匹配。一旦匹配， style(...)CSS樣式將應用于動畫綁定的宿主元素的最終狀態。 `最終狀態在所有動畫之后生效。

Now for the second occurrence. The data change that invoked the animation binding compares across the two transition(...) methods. One of them matches the change in data to their first argument. The first button click caused isGreen to go from ‘true’ to ‘false’ (‘true => false’). That means the first transition(...) method activates its second argument.

現在第二次出現。調用動畫綁定的數據更改在兩個transition(...)方法之間進行比較。其中一個將數據更改與第一個參數匹配。第一次單擊導致isGreen從“ true”變為“ false”(“ true => false”)。這意味著第一個transition(...)方法將激活其第二個參數。

The animate(...) function corresponding the successfully evaluated transition(...) method initiates. This method sets the duration of the animated color fade along with the fade’s pacing. The animation executes and the button fades to red.

將啟動與成功評估的transition(...)方法相對應的animate(...)函數。此方法設置動畫顏色淡入淡出的持續時間以及淡入淡出的步調。動畫將執行，并且按鈕將變為紅色。

This process can happen any number of times following a button click. The backgroundColor of the button will cycle between green and red in a linear fade.

單擊按鈕后，此過程可以發生任意多次。按鈕的backgroundColor將以線性淡入淡出在綠色和紅色之間循環。

動畫狀態 (Animation State)

The transition(...) micro-syntax is worth addressing in detail. Angular determines animations and their timing by evaluating this syntax. There exists the following state transitions. They model a changes in data bound to an animation binding.

transition(...)微語法值得詳細解決。 Angular通過評估此語法來確定動畫及其定時。存在以下狀態轉換。他們為綁定到動畫綁定的數據更改建模。

‘someValue’ => ‘anotherValue’
'someValue' => 'anotherValue'

An animation trigger where the bound data changes from ‘someValue’ to ‘anotherValue’.

動畫觸發器，其中綁定數據從“ someValue”更改為“ anotherValue”。

‘anotherValue’ => ‘someValue’
'anotherValue' => 'someValue'

An animation trigger where the bound data changes from ‘anotherValue’ to ‘someValue’.

動畫觸發器，其中綁定數據從“ anotherValue”更改為“ someValue”。

‘someValue’ <=> ‘anotherValue’
'someValue' <=> 'anotherValue'

Data changes from ‘someValue` to ‘anotherValue’ or vice versa.

數據從“ someValue”更改為“ anotherValue”，反之亦然。

There also exists void and * states. void indicates that the component is either entering or leaving the DOM. This is perfect for entry and exit animations.

也存在void和*狀態。 void指示組件正在進入或離開DOM。這非常適合進入和退出動畫。

‘someValue’ => void : host component of bound data is leaving the DOM
'someValue' => void ：綁定數據的主機組件正在離開 DOM
void => ‘someValue’ : host component of bound data is entering the DOM
void => 'someValue' ：綁定數據的主機組件正在進入 DOM

* denotes a wildcard state. Wildcard states can interpret to “any state”. This includes void plus any other change to the bound data.

*表示通配符狀態。通配符狀態可以解釋為“任何狀態”。這包括void以及對綁定數據的任何其他更改。

關鍵幀 (Keyframes)

This article touched on the basics for animating Angular applications. Advanced animation techniques exist alongside these basics. Grouping together keyframes is one such technique. Its inspired from the @keyframes CSS rule. If you have worked with CSS @keyframes, you already understand how keyframes in Angular work. It becomes just a matter of syntax

本文介紹了Angular應用程序動畫的基礎知識。這些基本知識與高級動畫技術并存。將關鍵幀分組在一起就是這樣一種技術。它的靈感來自@keyframes CSS規則。如果您使用過CSS @keyframes ，那么您已經了解了Angular中的關鍵幀如何工作。這只是語法問題

The keyframes(...) method imports from @angular/animations. It passes into the second argument of animate(...) instead of the typical AnimationStyleMetadata. The keyframes(...) method accepts one argument as an array of AnimationStyleMetadata. This can also be referred to as an array of style(...) methods.

keyframes(...)方法從@angular/animations導入。它傳遞給animate(...)的第二個參數，而不是典型的AnimationStyleMetadata 。 keyframes(...)方法接受一個參數作為AnimationStyleMetadata的數組。這也可以稱為style(...)方法的數組。

Each keyframe of the animation goes inside the keyframes(...) array. These keyframe elements are style(...) methods supporting the offset property. offset indicates a point in the animation’s duration where its accompanying style properties should apply. Its value spans from 0 (animation start) to 1 (animation end).

動畫的每個關鍵幀都位于keyframes(...)數組內。這些關鍵幀元素是支持offset屬性的style(...)方法。 offset指示動畫持續時間中應應用其伴隨樣式屬性的一點。其值的范圍從0(動畫開始)到1(動畫結束)。

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';@Component({selector: 'app-example',styles: [`.ball {position: relative;background-color: black;border-radius: 50%;top: 200px;height: 25px;width: 25px;}`],template: `<h3>Arcing Ball Animation</h3><button (click)="toggleBounce()">Arc the Ball!</button><div [@animateArc]="arc" class="ball"></div>`,animations: [trigger('animateArc', [state('true', style({left: '400px',top: '200px'})),state('false', style({left: '0',top: '200px'})),transition('false => true', animate('1000ms linear', keyframes([style({ left: '0',     top: '200px', offset: 0 }),style({ left: '200px', top: '100px', offset: 0.50 }),style({ left: '400px', top: '200px', offset: 1 })]))),transition('true => false', animate('1000ms linear', keyframes([style({ left: '400px', top: '200px', offset: 0 }),style({ left: '200px', top: '100px', offset: 0.50 }),style({ left: '0',     top: '200px', offset: 1 })])))])]
})
export class ExampleComponent {arc: string = 'false';toggleBounce(){this.arc = this.arc === 'false' ? 'true' : 'false';}
}

The main difference of the above example compared to the other example is the second argument of animate(...). It now contains a keyframes(...) method hosting an array of animation keyframes. While the animation itself is also different, the technique to animate is similar.

上面的示例與另一個示例相比，主要區別在于animate(...)的第二個參數。現在，它包含一個keyframes(...)方法，該方法承載著一系列動畫關鍵幀。盡管動畫本身也不同，但是動畫制作技術卻相似。

Clicking the button causes the button to arc across the screen. The arc moves as per the keyframes(...) method’s array elements (keyframes). At the animation’s mid-point (offset: 0.50), the ball changes trajectory. It descends to its original height as it continues across the screen. Clicking the button again reverses the animation.

單擊按鈕會使按鈕在屏幕上成弧形。圓弧按照keyframes(...)方法的數組元素(關鍵幀)移動。在動畫的中點( offset: 0.50 )處，球會改變軌跡。隨著它在屏幕上繼續前進，它下降到其原始高度。再次單擊該按鈕將反轉動畫。

left and top are animatable properties after setting position: relative; for the element. The transform property can perform similar movement-based animations. transform is an expansive yet fully animatable property.

left和top是設置position: relative;后的動畫屬性position: relative; 為元素。 transform屬性可以執行類似的基于運動的動畫。 transform是可擴展但完全可動畫的屬性。

Any number of keyframes can existing between offset 0 and 1. Intricate animation sequences take the form of keyframes. They are one of many advanced techniques in Angular animations.

偏移量0和1之間可以存在任意數量的關鍵幀。復雜的動畫序列采用關鍵幀的形式。它們是Angular動畫中許多高級技術之一。

具有主機綁定的動畫 (Animations With Host Binding)

You will undoubtedly come across the situation where you want to attach an animation to the HTML element of a component itself, instead of an element in the component’s template. This requires a little more effort since you can’t just go into the template HTML and attach the animation there. Instead, you’ll have to import HostBinding and utilize that.

毫無疑問，您會遇到想要將動畫附加到組件本身HTML元素而不是組件模板中的元素的情況。這需要更多的精力，因為您不能只進入模板HTML并在其中附加動畫。相反，您必須導入HostBinding并加以利用。

The minimal code for this scenario is shown below. I’ll re-use the same animation condition for the code above for consistency and I don’t show any of the actual animation code since you can easily find that above.

下面顯示了此方案的最小代碼。為了保持一致性，我將對上面的代碼重新使用相同的動畫條件，并且由于您可以輕松地在上面找到代碼，因此我不顯示任何實際的動畫代碼。

import { Component, HostBinding } from '@angular/core';@Component({
...
})
export class ExampleComponent {@HostBinding('@animateArc') get arcAnimation() {return this.arc;}
}

The idea behind animating the host component is pretty much the same as animating a element from the template with the only difference being your lack of access to the element you are animating. You still have to pass the name of the animation (@animateArc) when declaring the HostBinding and you still have to return the current state of the animation (this.arc). The name of the function doesn’t actual matter, so arcAnimation could have been changed to anything, as long as it doesn’t clash with existing property names on the component, and it would work perfectly fine.

對宿主組件進行動畫處理的想法與從模板對元素進行動畫處理幾乎相同，唯一的區別是您無法訪問要進行動畫處理的元素。在聲明HostBinding ，您仍然必須傳遞動畫的名稱( @animateArc )，并且仍然必須返回動畫的當前狀態( this.arc )。函數的名稱并不重要，因此只要不與組件上的現有屬性名稱沖突， arcAnimation可以更改為任何內容，并且可以很好地工作。

結論 (Conclusion)

This covers the basics of animating with Angular. Angular makes setting up animations very easy using the Angular CLI. Getting started with your first animation only requires a single component class. Remember, animations scope to the component’s template. Export your transitions array from a separate file if you plan to use it across multiple components.

這涵蓋了使用Angular進行動畫制作的基礎知識。 Angular使使用Angular CLI設置動畫非常容易。第一個動畫入門僅需要單個組件類。請記住，動畫的作用域是組件的模板。如果計劃跨多個組件使用過渡數組，請從單獨的文件中導出過渡數組。

Every animation utility/method exports from @angular/animations. They all work together to provide a robust system of animation inspired from CSS. There are more methods beyond what this article could cover.

每個動畫實用程序/方法都從@angular/animations導出。它們一起工作以提供一個受CSS啟發的強大動畫系統。除了本文可以涵蓋的范圍之外，還有更多方法。

Now that you know the basics, feel free to explore the links below for more on Angular animations.

現在，您已經了解了基礎知識，可以隨時瀏覽以下鏈接，以獲取有關Angular動畫的更多信息。