angular中的動(dòng)畫怎么實(shí)現(xiàn)
這篇文章主要介紹了angular中的動(dòng)畫怎么實(shí)現(xiàn)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇angular中的動(dòng)畫怎么實(shí)現(xiàn)文章都會(huì)有所收獲，下面我們一起來看看吧。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)雙柏免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
狀態(tài)
1、什么是狀態(tài)
狀態(tài)表示的是要進(jìn)行運(yùn)動(dòng)的元素在運(yùn)動(dòng)的不同時(shí)期所呈現(xiàn)的樣式。
2、狀態(tài)的種類
在 Angular 中，有三種類型的狀態(tài)，分別為：void、*、custom
void：當(dāng)元素在內(nèi)存中創(chuàng)建好但尚未被添加到 DOM 中或?qū)⒃貜?DOM 中刪除時(shí)會(huì)發(fā)生此狀態(tài)
*：元素被插入到 DOM 樹之后的狀態(tài)，或者是已經(jīng)在DOM樹中的元素的狀態(tài)，也叫默認(rèn)狀態(tài)
custom：自定義狀態(tài)，元素默認(rèn)就在頁(yè)面之中，從一個(gè)狀態(tài)運(yùn)動(dòng)到另一個(gè)狀態(tài)，比如面板的折疊和展開。
3、進(jìn)出場(chǎng)動(dòng)畫
進(jìn)場(chǎng)動(dòng)畫是指元素被創(chuàng)建后以動(dòng)畫的形式出現(xiàn)在用戶面前，進(jìn)場(chǎng)動(dòng)畫的狀態(tài)用 void => * 表示，別名為 :enter
出場(chǎng)動(dòng)畫是指元素在被刪除前執(zhí)行的一段告別動(dòng)畫，出場(chǎng)動(dòng)畫的狀態(tài)用 * => void，別名為 :leave
快速上手
1、在使用動(dòng)畫功能之前，需要引入動(dòng)畫模塊，即 BrowserAnimationsModule
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
@NgModule({
imports: [BrowserAnimationsModule],
})
export class AppModule {}2、默認(rèn)代碼解析，todo 之刪除任務(wù)和添加任務(wù)
<!-- 在 index.html 文件中引入 bootstrap.min.css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<div class="container">
<h3>Todos</h3>
<div class="form-group">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />
</div>
<ul class="list-group">
<li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">
{{ item }}
</li>
</ul>
</div>import { Component } from "@angular/core"
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: []
})
export class AppComponent {
// todo 列表
todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
// 添加 todo
addItem(input: HTMLInputElement) {
this.todos.push(input.value)
input.value = ""
}
// 刪除 todo
removeItem(index: number) {
this.todos.splice(index, 1)
}
}3、創(chuàng)建動(dòng)畫
trigger 方法用于創(chuàng)建動(dòng)畫，指定動(dòng)畫名稱
transition 方法用于指定動(dòng)畫的運(yùn)動(dòng)狀態(tài)，出場(chǎng)動(dòng)畫或者入場(chǎng)動(dòng)畫，或者自定義狀態(tài)動(dòng)畫。
style 方法用于設(shè)置元素在不同的狀態(tài)下所對(duì)應(yīng)的樣式
animate 方法用于設(shè)置運(yùn)動(dòng)參數(shù)，比如動(dòng)畫運(yùn)動(dòng)時(shí)間，延遲事件，運(yùn)動(dòng)形式
@Component({
animations: [
// 創(chuàng)建動(dòng)畫, 動(dòng)畫名稱為 slide
trigger("slide", [
// 指定入場(chǎng)動(dòng)畫 注意: 字符串兩邊不能有空格, 箭頭兩邊可以有也可以沒有空格
// void => * 可以替換為 :enter
transition("void => *", [
// 指定元素未入場(chǎng)前的樣式
style({ opacity: 0, transform: "translateY(40px)" }),
// 指定元素入場(chǎng)后的樣式及運(yùn)動(dòng)參數(shù)
animate(250, style({ opacity: 1, transform: "translateY(0)" }))
]),
// 指定出場(chǎng)動(dòng)畫
// * => void 可以替換為 :leave
transition("* => void", [
// 指定元素出場(chǎng)后的樣式和運(yùn)動(dòng)參數(shù)
animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])
]
})注意：入場(chǎng)動(dòng)畫中可以不指定元素的默認(rèn)狀態(tài)，Angular 會(huì)將 void 狀態(tài)清空作為默認(rèn)狀態(tài)
trigger("slide", [
transition(":enter", [
style({ opacity: 0, transform: "translateY(40px)" }),
animate(250)
]),
transition(":leave", [
animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])注意：要設(shè)置動(dòng)畫的運(yùn)動(dòng)參數(shù)，需要將 animate 方法的一個(gè)參數(shù)更改為字符串類型
// 動(dòng)畫執(zhí)行總時(shí)間 延遲時(shí)間 (可選) 運(yùn)動(dòng)形式 (可選)
animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))關(guān)鍵幀動(dòng)畫
關(guān)鍵幀動(dòng)畫使用 keyframes 方法定義
transition(":leave", [
animate(
600,
keyframes([
style({ offset: 0.3, transform: "translateX(-80px)" }),
style({ offset: 1, transform: "translateX(100%)" })
])
)
])動(dòng)畫回調(diào)
Angular 提供了和動(dòng)畫相關(guān)的兩個(gè)回調(diào)函數(shù)，分別為動(dòng)畫開始執(zhí)行時(shí)和動(dòng)畫執(zhí)行完成后
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
import { AnimationEvent } from "@angular/animations"
start(event: AnimationEvent) {
console.log(event)
}
done(event: AnimationEvent) {
console.log(event)
}創(chuàng)建可重用動(dòng)畫
1、將動(dòng)畫的定義放置在單獨(dú)的文件中，方便多組件調(diào)用。
import { animate, keyframes, style, transition, trigger } from "@angular/animations"
export const slide = trigger("slide", [
transition(":enter", [
style({ opacity: 0, transform: "translateY(40px)" }),
animate(250)
]),
transition(":leave", [
animate(
600,
keyframes([
style({ offset: 0.3, transform: "translateX(-80px)" }),
style({ offset: 1, transform: "translateX(100%)" })
])
)
])
])import { slide } from "./animations"
@Component({
animations: [slide]
})2、抽取具體的動(dòng)畫定義，方便多動(dòng)畫調(diào)用。
import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"
export const slideInUp = animation([
style({ opacity: 0, transform: "translateY(40px)" }),
animate(250)
])
export const slideOutLeft = animation([
animate(
600,
keyframes([
style({ offset: 0.3, transform: "translateX(-80px)" }),
style({ offset: 1, transform: "translateX(100%)" })
])
)
])
export const slide = trigger("slide", [
transition(":enter", useAnimation(slideInUp)),
transition(":leave", useAnimation(slideOutLeft))
])3、調(diào)用動(dòng)畫時(shí)傳遞運(yùn)動(dòng)總時(shí)間，延遲時(shí)間，運(yùn)動(dòng)形式
export const slideInUp = animation(
[
style({ opacity: 0, transform: "translateY(40px)" }),
animate("{{ duration }} {{ delay }} {{ easing }}")
],
{
params: {
duration: "400ms",
delay: "0s",
easing: "ease-out"
}
}
)transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))查詢?cè)貓?zhí)行動(dòng)畫
Angular 中提供了 query 方法查找元素并為元素創(chuàng)建動(dòng)畫
import { slide } from "./animations"
animations: [
slide,
trigger("todoAnimations", [
transition(":enter", [
query("h3", [
style({ transform: "translateY(-30px)" }),
animate(300)
]),
// 查詢子級(jí)動(dòng)畫 使其執(zhí)行
query("@slide", animateChild())
])
])
]<div class="container" @todoAnimations>
<h3>Todos</h3>
<ul class="list-group">
<li
@slide
(click)="removeItem(i)"
*ngFor="let item of todos; let i = index"
class="list-group-item"
>
{{ item }}
</li>
</ul>
</div>默認(rèn)情況下，父級(jí)動(dòng)畫和子級(jí)動(dòng)畫按照順序執(zhí)行，先執(zhí)行父級(jí)動(dòng)畫，再執(zhí)行子級(jí)動(dòng)畫，可以使用 group 方法讓其并行
trigger("todoAnimations", [
transition(":enter", [
group([
query("h3", [
style({ transform: "translateY(-30px)" }),
animate(300)
]),
query("@slide", animateChild())
])
])
])交錯(cuò)動(dòng)畫
Angular 提供了 stagger 方法，在多個(gè)元素同時(shí)執(zhí)行同一個(gè)動(dòng)畫時(shí)，讓每個(gè)元素動(dòng)畫的執(zhí)行依次延遲。
transition(":enter", [
group([
query("h3", [
style({ transform: "translateY(-30px)" }),
animate(300)
]),
query("@slide", stagger(200, animateChild()))
])
])注意：stagger 方法只能在 query 方法內(nèi)部使用
自定義狀態(tài)動(dòng)畫
Angular 提供了 state 方法用于定義狀態(tài)。
1、默認(rèn)代碼解析
<div class="container">
<div class="panel panel-default">
<div class="panel-heading" (click)="toggle()">
一套框架, 多種平臺(tái), 移動(dòng)端 & 桌面端
</div>
<div class="panel-body">
<p>
使用簡(jiǎn)單的聲明式模板，快速實(shí)現(xiàn)各種特性。使用自定義組件和大量現(xiàn)有組件，擴(kuò)展模板語(yǔ)言。在幾乎所有的
IDE 中獲得針對(duì) Angular
的即時(shí)幫助和反饋。所有這一切，都是為了幫助你編寫漂亮的應(yīng)用，而不是絞盡腦汁的讓代碼“能用”。
</p>
<p>
從原型到全球部署，Angular 都能帶給你支撐 Google
大型應(yīng)用的那些高延展性基礎(chǔ)設(shè)施與技術(shù)。
</p>
<p>
通過 Web Worker 和服務(wù)端渲染，達(dá)到在如今(以及未來）的 Web
平臺(tái)上所能達(dá)到的最高速度。 Angular 讓你有效掌控可伸縮性。基于
RxJS、Immutable.js 和其它推送模型，能適應(yīng)海量數(shù)據(jù)需求。
</p>
<p>
學(xué)會(huì)用 Angular
構(gòu)建應(yīng)用，然后把這些代碼和能力復(fù)用在多種多種不同平臺(tái)的應(yīng)用上 ——
Web、移動(dòng) Web、移動(dòng)應(yīng)用、原生應(yīng)用和桌面原生應(yīng)用。
</p>
</div>
</div>
</div>
<style>
.container {
margin-top: 100px;
}
.panel-heading {
cursor: pointer;
}
</style>import { Component } from "@angular/core"
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: []
})
export class AppComponent {
isExpended: boolean = false
toggle() {
this.isExpended = !this.isExpended
}
}2、創(chuàng)建動(dòng)畫
trigger("expandCollapse", [
// 使用 state 方法定義折疊狀態(tài)元素對(duì)應(yīng)的樣式
state(
"collapsed",
style({
height: 0,
overflow: "hidden",
paddingTop: 0,
paddingBottom: 0
})
),
// 使用 state 方法定義展開狀態(tài)元素對(duì)應(yīng)的樣式
state("expanded", style({ height: "*", overflow: "auto" })),
// 定義展開動(dòng)畫
transition("collapsed => expanded", animate("400ms ease-out")),
// 定義折疊動(dòng)畫
transition("expanded => collapsed", animate("400ms ease-in"))
])<div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
路由動(dòng)畫
1、為路由添加狀態(tài)標(biāo)識(shí)，此標(biāo)識(shí)即為路由執(zhí)行動(dòng)畫時(shí)的自定義狀態(tài)
const routes: Routes = [
{
path: "",
component: HomeComponent,
pathMatch: "full",
data: {
animation: "one"
}
},
{
path: "about",
component: AboutComponent,
data: {
animation: "two"
}
},
{
path: "news",
component: NewsComponent,
data: {
animation: "three"
}
}
]2、通過路由插座對(duì)象獲取路由狀態(tài)標(biāo)識(shí)，并將標(biāo)識(shí)傳遞給動(dòng)畫的調(diào)用者，讓動(dòng)畫執(zhí)行當(dāng)前要執(zhí)行的狀態(tài)是什么
<div class="routerContainer" [@routerAnimations]="prepareRoute(outlet)"> <router-outlet #outlet="outlet"></router-outlet> </div>
import { RouterOutlet } from "@angular/router"
export class AppComponent {
prepareRoute(outlet: RouterOutlet) {
return (
outlet &&
outlet.activatedRouteData &&
outlet.activatedRouteData.animation
)
}
}3、將 routerContainer 設(shè)置為相對(duì)定位，將它的直接一級(jí)子元素設(shè)置成絕對(duì)定位
/* styles.css */
.routerContainer {
position: relative;
}
.routerContainer > * {
position: absolute;
left: 0;
top: 0;
width: 100%;
}4、創(chuàng)建動(dòng)畫
trigger("routerAnimations", [
transition("one => two, one => three, two => three", [
query(":enter", style({ transform: "translateX(100%)", opacity: 0 })),
group([
query(
":enter",
animate(
"0.4s ease-in",
style({ transform: "translateX(0)", opacity: 1 })
)
),
query(
":leave",
animate(
"0.4s ease-out",
style({
transform: "translateX(-100%)",
opacity: 0
})
)
)
])
]),
transition("three => two, three => one, two => one", [
query(
":enter",
style({ transform: "translateX(-100%)", opacity: 0 })
),
group([
query(
":enter",
animate(
"0.4s ease-in",
style({ transform: "translateX(0)", opacity: 1 })
)
),
query(
":leave",
animate(
"0.4s ease-out",
style({
transform: "translateX(100%)",
opacity: 0
})
)
)
])
])
])關(guān)于“angular中的動(dòng)畫怎么實(shí)現(xiàn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“angular中的動(dòng)畫怎么實(shí)現(xiàn)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站欄目：angular中的動(dòng)畫怎么實(shí)現(xiàn)
路徑分享：http://www.chinadenli.net/article8/joioop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、微信小程序、網(wǎng)站收錄、用戶體驗(yàn)、微信公眾號(hào)、響應(yīng)式網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 微信小程序開發(fā)需要多少錢？ 2023-02-19
- 選擇微信小程序開發(fā)定制公司的注意事項(xiàng) 2022-07-18
- 商家如何通過微信小程序引流？有哪些方式？ 2022-05-23
- 創(chuàng)新互聯(lián)：微信小程序?yàn)楹慰雌饋聿粶夭换穑?/a> 2023-02-22
- 微信小程序主要優(yōu)勢(shì)和價(jià)值 2021-02-21
- 微信小程序分享等能力升級(jí)：可自定義分享配圖 2022-05-14
- 你做微信小程序這么久，為什么沒能留住用戶？ 2021-02-13
- 用微信小程序怎么做微信產(chǎn)品的推廣？ 2022-05-24
- 微信小程序能夠帶給企業(yè)的五大優(yōu)勢(shì) 2022-08-13
- 微信小程序憑什么引領(lǐng)未來極速上線小程序 2022-11-18
- 微信小程序和餐飲碰撞的威力居然這么大 2022-11-20
- 微信小程序適合用在新零售嗎 2021-02-28