W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
本主題提供了一些關(guān)于如何創(chuàng)建可復(fù)用動(dòng)畫的例子。
在繼續(xù)本主題前,你需要熟悉下列知識:
要想創(chuàng)建可復(fù)用的動(dòng)畫,請使用 ?animation()
? 方法來在獨(dú)立的 ?.ts
? 文件中定義動(dòng)畫,并把該動(dòng)畫的定義聲明為一個(gè)導(dǎo)出的 ?const
?變量。然后你就可以在應(yīng)用的組件代碼中通過 ?useAnimation()
? 來導(dǎo)入并復(fù)用它了。
import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
export const transitionAnimation = animation([
style({
height: '{{ height }}',
opacity: '{{ opacity }}',
backgroundColor: '{{ backgroundColor }}'
}),
animate('{{ time }}')
]);
在上面的代碼片段中,通過把 ?transitionAnimation
?聲明為一個(gè)導(dǎo)出的變量,就讓它變成了可復(fù)用的。
注意:
?height
?、?opacity
?、?backgroundColor
?和 ?time
?這幾個(gè)輸入項(xiàng)會在運(yùn)行期間被替換掉。
你還可以導(dǎo)出某個(gè)動(dòng)畫的一部分。比如,下列代碼片段會導(dǎo)出 ?trigger
?這個(gè)動(dòng)畫。
import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
transition('open => closed', [
useAnimation(transitionAnimation, {
params: {
height: 0,
opacity: 1,
backgroundColor: 'red',
time: '1s'
}
})
])
]);
從現(xiàn)在起,你可以在組件類中導(dǎo)入這些可復(fù)用動(dòng)畫變量。比如下面的代碼片段就導(dǎo)入了 ?transitionAnimation
?變量,并通過 ?useAnimation()
? 函數(shù)來復(fù)用它。
import { Component } from '@angular/core';
import { transition, trigger, useAnimation } from '@angular/animations';
import { transitionAnimation } from './animations';
@Component({
selector: 'app-open-close-reusable',
animations: [
trigger('openClose', [
transition('open => closed', [
useAnimation(transitionAnimation, {
params: {
height: 0,
opacity: 1,
backgroundColor: 'red',
time: '1s'
}
})
])
])
],
templateUrl: 'open-close.component.html',
styleUrls: ['open-close.component.css']
})
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: