建站
咨詢
售后
建站咨詢
新聞中心
前提條件
對(duì)下列概念有基本的理解：
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括光澤網(wǎng)站建設(shè)、光澤網(wǎng)站制作、光澤網(wǎng)頁制作以及光澤網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，光澤網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到光澤省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
- Angular 動(dòng)畫簡(jiǎn)介
- 轉(zhuǎn)場(chǎng)與觸發(fā)器
到目前為止，我們已經(jīng)學(xué)過了單個(gè) HTML 元素的簡(jiǎn)單動(dòng)畫。Angular 還允許你在進(jìn)入和離開頁面時(shí)播放 "動(dòng)畫協(xié)調(diào)序列"，比如當(dāng)整個(gè)網(wǎng)格或元素列表進(jìn)入或離開頁面時(shí)，多個(gè)條目的動(dòng)畫之間需要彼此協(xié)調(diào)時(shí)間。你可以選擇并行執(zhí)行多個(gè)動(dòng)畫，或者按順序逐個(gè)運(yùn)行離散動(dòng)畫。
用來控制復(fù)雜動(dòng)畫序列的函數(shù)如下：
|
函數(shù) |
詳情 |
|---|---|
query() | 用于查找一個(gè)或多個(gè)內(nèi)部 HTML 元素。 |
stagger() | 用于為多元素動(dòng)畫應(yīng)用級(jí)聯(lián)延遲。 |
?group()? | 用于并行執(zhí)行多個(gè)動(dòng)畫步驟。 |
sequence() | 用于逐個(gè)順序執(zhí)行多個(gè)動(dòng)畫步驟。 |
query() 函數(shù)
大多數(shù)復(fù)雜動(dòng)畫都依賴 ?query()? 函數(shù)來查找子元素并對(duì)其應(yīng)用動(dòng)畫，基本的例子是：
|
例子 |
詳情 |
|---|---|
| 用于查詢簡(jiǎn)單的 HTML 元素并直接對(duì)它們應(yīng)用動(dòng)畫。 |
| 用于查詢子元素，這些元素本身就應(yīng)用了動(dòng)畫元數(shù)據(jù)并觸發(fā)這樣的動(dòng)畫（否則將被當(dāng)前/父元素的動(dòng)畫阻止）。 |
query() 的第一個(gè)參數(shù)是一個(gè) css 選擇器字符串，它還可以包含以下 Angular 特定的標(biāo)記：
|
標(biāo)記 |
詳情 |
|---|---|
| 用于進(jìn)入/離開元素。 |
:animating | 對(duì)于當(dāng)前正在播放動(dòng)畫的元素。 |
@* @triggerName | 對(duì)于具有任何（或特定）觸發(fā)器的元素。 |
:self | 動(dòng)畫元素本身。 |
進(jìn)入和離開元素
并非所有子元素都會(huì)實(shí)際上被認(rèn)為是進(jìn)入/離開；有時(shí)，這可能是違反直覺和令人困惑的。
你還可以在 Querying 選項(xiàng)卡下的動(dòng)畫實(shí)時(shí)示例（在 動(dòng)畫介紹部分）中看到這方面的插圖。
使用 query() 和 stagger()（交錯(cuò)）函數(shù)執(zhí)行多元素動(dòng)畫
通過 ?query()? 查詢子元素后，?stagger()? 函數(shù)允許你定義每個(gè)查詢的動(dòng)畫項(xiàng)之間的時(shí)間間隙，從而為元素之間延遲設(shè)置動(dòng)畫。
下面的例子演示了如何使用 ?query()? 和 ?stagger()? 函數(shù)對(duì)依次添加的英雄列表從上到下播放動(dòng)畫（有少許延遲）。
- 用 ?
query()? 查閱正在進(jìn)入或離開頁面的任意元素。該查詢會(huì)找出那些符合某種匹配 CSS 選擇器的元素 - 對(duì)每個(gè)元素，使用 ?
style()? 為其設(shè)置初始樣式。使其變得透明，并使用 ?transform?將其移出位置，以便它能滑入后就位。 - 使用 ?
stagger()? 來在每個(gè)動(dòng)畫之間延遲 30 毫秒 - 對(duì)屏幕上的每個(gè)元素，根據(jù)一條自定義緩動(dòng)曲線播放 0.5 秒的動(dòng)畫，同時(shí)將其淡入，而且逐步取消以前的位移效果
animations: [
trigger('pageAnimations', [
transition(':enter', [
query('.hero', [
style({opacity: 0, transform: 'translateY(-100px)'}),
stagger(30, [
animate('500ms cubic-bezier(0.35, 0, 0.25, 1)',
style({ opacity: 1, transform: 'none' }))
])
])
])
]),使用 group() 函數(shù)播放并行動(dòng)畫
你已經(jīng)了解了如何在兩個(gè)連續(xù)的動(dòng)畫之間添加延遲。不過你可能還想配置一些并行的動(dòng)畫。比如，你可能希望為同一個(gè)元素的兩個(gè) CSS 屬性設(shè)置動(dòng)畫，但要為每個(gè)屬性使用不同的 ?easing ?函數(shù)。這時(shí)，你可以使用動(dòng)畫函數(shù) ?group()?。
注意：
?
group()?函數(shù)用于對(duì)動(dòng)畫
步驟進(jìn)行分組，而不是針對(duì)動(dòng)畫元素。
在下面的例子中，對(duì) ?:enter? 和 ?:leave? 使用分組，可以配置兩種不同的時(shí)序。它們會(huì)同時(shí)作用于同一個(gè)元素，但彼此獨(dú)立運(yùn)行。
animations: [
trigger('flyInOut', [
state('in', style({
width: '*',
transform: 'translateX(0)', opacity: 1
})),
transition(':enter', [
style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
group([
animate('0.3s 0.1s ease', style({
transform: 'translateX(0)',
width: '*'
})),
animate('0.3s ease', style({
opacity: 1
}))
])
]),
transition(':leave', [
group([
animate('0.3s ease', style({
transform: 'translateX(50px)',
width: 10
})),
animate('0.3s 0.2s ease', style({
opacity: 0
}))
])
])
])
]順序動(dòng)畫與平行動(dòng)畫
復(fù)雜動(dòng)畫中可以同時(shí)發(fā)生很多事情。但是當(dāng)你要?jiǎng)?chuàng)建一個(gè)需要讓幾個(gè)子動(dòng)畫逐個(gè)執(zhí)行的動(dòng)畫時(shí)，該怎么辦呢？以前我們使用 ?group()? 來同時(shí)并行運(yùn)行多個(gè)動(dòng)畫。
第二個(gè)名叫 ?sequence()? 的函數(shù)會(huì)讓你一個(gè)接一個(gè)地運(yùn)行這些動(dòng)畫。在 ?sequence()? 中，這些動(dòng)畫步驟由 ?style()? 或 ?animate()? 的函數(shù)調(diào)用組成。
- ?
style()? 用來立即應(yīng)用所指定的樣式數(shù)據(jù)。 - ?
animate()? 用來在一定的時(shí)間間隔內(nèi)應(yīng)用樣式數(shù)據(jù)。
過濾器動(dòng)畫范例
來看看范例應(yīng)用中的另一個(gè)動(dòng)畫。在 Filter/Stagger 頁，往 Search Heroes 文本框中輸入一些文本，比如 ?Magnet ?或 ?tornado?。
過濾器會(huì)在你輸入時(shí)實(shí)時(shí)工作。每當(dāng)你鍵入一個(gè)新字母時(shí)，就會(huì)有一些元素離開頁面，并且過濾條件也會(huì)逐漸變得更加嚴(yán)格。相反，當(dāng)你刪除過濾器中的每個(gè)字母時(shí)，英雄列表也會(huì)逐漸重新進(jìn)入頁面中。
HTML 模板中包含一個(gè)名叫 ?filterAnimation ?的觸發(fā)器。
-
{{ hero.id }}
{{ hero.name }}
該組件裝飾器中的 ?filterAnimation ?包含三個(gè)轉(zhuǎn)場(chǎng)。
@Component({
animations: [
trigger('filterAnimation', [
transition(':enter, * => 0, * => -1', []),
transition(':increment', [
query(':enter', [
style({ opacity: 0, width: 0 }),
stagger(50, [
animate('300ms ease-out', style({ opacity: 1, width: '*' })),
]),
], { optional: true })
]),
transition(':decrement', [
query(':leave', [
stagger(50, [
animate('300ms ease-out', style({ opacity: 0, width: 0 })),
]),
])
]),
]),
]
})
export class HeroListPageComponent implements OnInit {
heroesTotal = -1;
get heroes() { return this._heroes; }
private _heroes: Hero[] = [];
ngOnInit() {
this._heroes = HEROES;
}
updateCriteria(criteria: string) {
criteria = criteria ? criteria.trim() : '';
this._heroes = HEROES.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase()));
const newTotal = this.heroes.length;
if (this.heroesTotal !== newTotal) {
this.heroesTotal = newTotal;
} else if (!criteria) {
this.heroesTotal = -1;
}
}
}這個(gè)例子中的代碼包含下列任務(wù)：
- 當(dāng)用戶首次打開或?qū)Ш降酱隧撁鏁r(shí)，跳過所有動(dòng)畫（該動(dòng)畫會(huì)壓扁已經(jīng)存在的內(nèi)容，因此它只會(huì)作用于那些已經(jīng)存在于 DOM 中的元素）
- 根據(jù)搜索框中的值過濾英雄
對(duì)于每次匹配：
- 通過將元素的不透明度和寬度設(shè)置為 0 來隱藏正在離開 DOM 的元素
- 對(duì)正在進(jìn)入 DOM 的元素，播放一個(gè) 300 毫秒的動(dòng)畫。在動(dòng)畫期間，該元素采用其默認(rèn)寬度和不透明度。
- 如果有多個(gè)匹配的元素正在進(jìn)入或離開 DOM，則從頁面頂部的元素開始對(duì)每個(gè)元素進(jìn)行交錯(cuò)（stagger），每個(gè)元素之間的延遲為 50 毫秒
在重新排序列表的條目時(shí)設(shè)置動(dòng)畫
盡管 Angular 開箱即用的支持 ?*ngFor? 列表項(xiàng)動(dòng)畫，但如果只是它們的順序變化了，就無法支持。因?yàn)?nbsp;Angular 會(huì)忘記哪個(gè)元素是哪個(gè)元素，從而導(dǎo)致這些動(dòng)畫被破壞。幫助 Angular 跟蹤此類元素的唯一方法是將 ?TrackByFunction ?分配給 ?NgForOf ?指令。這可確保 Angular 始終知道哪個(gè)元素是哪個(gè)，從而允許它始終將正確的動(dòng)畫應(yīng)用于正確的元素。
重要：
如果你需要為 ?
*ngFor? 列表的條目設(shè)置動(dòng)畫，并且此類條目的順序有可能在運(yùn)行時(shí)更改，請(qǐng)始終使用 ?
TrackByFunction?。
動(dòng)畫序列總結(jié)
Angular 中這些用于多元素動(dòng)畫的函數(shù)，都要從 ?query()? 開始，查找出內(nèi)部元素，比如找出某個(gè) ?stagger()?、?group()? 和 ?sequence()? 會(huì)以級(jí)聯(lián)方式或你的自定義邏輯來控制要如何應(yīng)用多個(gè)動(dòng)畫步驟。
標(biāo)題名稱：創(chuàng)新互聯(lián)Angular教程：Angular復(fù)雜序列
標(biāo)題URL：http://fisionsoft.com.cn/article/dhshccg.html
