您好,登錄后才能下訂單哦!
Angular2的動畫系統(tǒng)賦予了制作各種動畫效果的能力,致力于構(gòu)建出與原生CSS動畫性能相同的動畫。
Angular2的動畫主要是和@Component結(jié)合在了一起。
animations元數(shù)據(jù)屬性在定義@Component裝飾。就像template元數(shù)據(jù)屬性!這樣就可以讓動畫邏輯與其應(yīng)用代碼緊緊集成在一起,這讓動畫可以更容易的出發(fā)與控制。
一.在app.mudule.ts中引入:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
并在@NgModule中的imports添加:
imports: [BrowserAnimationsModule],
二.創(chuàng)建文件定義名為animations.ts用來書寫轉(zhuǎn)場動畫
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from'@angular/core'; // Component transition animations export const slideInDownAnimation: AnimationEntryMetadata = // 動畫觸發(fā)器名稱 trigger('routeAnimation', [ state('*', style({ opacity: 1, transform: 'translateX(0)' }) ), transition(':enter', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition(':leave', [ animate('0.5s ease-out', style({ opacity: 0, transform: 'translateY(100%)' })) ]) ]);
三.在需要添加轉(zhuǎn)場動畫的頁面操作
引入import {HostBinding } from '@angular/core';(如果引入過直接將HostBinding添加進去就好,不要重復(fù)引入,多嘴了...)
再引入你寫好的動畫模板:import { slideInDownAnimation } from '../animation';
在@Component中添加:animations:[slideInDownAnimation],
最后:
// 添加@HostBinding屬性添加到類中以設(shè)置這個路由組件元素的動畫和樣式 @HostBinding('@routeAnimation') routeAnimation = true; @HostBinding('style.display') display = 'block'; @HostBinding('style.position') position = 'absolute';
四.至此你可以去瀏覽器看看效果了,如果沒有錯誤
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。