Angular4.0動(dòng)畫(huà)操作實(shí)例詳解

更新時(shí)間：2019年05月10日 10:17:16 作者：徐行莫停

這篇文章主要介紹了Angular4.0動(dòng)畫(huà)操作,結(jié)合實(shí)例形式詳細(xì)分析了Angular4.0動(dòng)畫(huà)的原理、定義及使用等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular4.0動(dòng)畫(huà)操作。分享給大家供大家參考，具體如下：

粗略的記錄一下angular4的動(dòng)畫(huà)

先看一下angular中文網(wǎng)關(guān)于這個(gè)給的例子。

有兩個(gè)組件home，about。路徑配置什么的這里就不細(xì)說(shuō)了，之前的博文有說(shuō)過(guò)，我就貼一下代碼，很好理解的，

需要import的東西我先說(shuō)一下，我只貼了使用動(dòng)畫(huà)要用的東西，其他的我省略了，

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
 imports: [
 BrowserModule,
 BrowserAnimationsModule,
 AppRouting
 ],
 ...
})

在這個(gè)簡(jiǎn)單的例子里我要對(duì)app.component.html里的內(nèi)容進(jìn)行animate，所以我的

app.component.ts

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 animations: [] // 這里代碼我省略了，先說(shuō)一下結(jié)構(gòu)，后面說(shuō)具體實(shí)現(xiàn)。
})

以上就是需要寫動(dòng)畫(huà)實(shí)現(xiàn)的基本結(jié)構(gòu)，下面貼實(shí)現(xiàn)這個(gè)例子的代碼。為了方便閱讀，我把代碼解釋就貼在代碼旁邊

例一：

這是路由配置：

import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {AboutComponent} from "./about/about.component";
const routes: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'home', component: HomeComponent, data: { state: 'home' } },
 { path: 'about', component: AboutComponent, data: { state: 'about' } }
];
export const AppRouting = RouterModule.forRoot(routes, {
 useHash: true
});

app.component.html

<nav>
 <a routerLink="home" routerLinkActive="active">Home</a>
 <a routerLink="about" routerLinkActive="active">About</a>
</nav>
<main [@routerTransition] = "gg(o)">
 <router-outlet #o="outlet"></router-outlet>
</main>
<div [@queryAnimation]="goAnimate()">
 <div class="content">
 Blah blah blah
 </div>
 <h1>Title</h1>
</div>
 <!-- 
 [@routerTransition]="gg(o)" ,api：transition declares the sequence of animation steps that will be run when the provided stateChangeExpr value is satisfied. stateChangeExpr即等號(hào)左邊即動(dòng)畫(huà)名稱，注意中括號(hào)和@符不能省略，等號(hào)右邊是一個(gè)函數(shù)，也可以是變量，滿足條件便可以讓動(dòng)畫(huà)進(jìn)行，一個(gè)動(dòng)畫(huà)可以多次使用 
 -->

app.component.ts

import { Component } from '@angular/core';
import {routerTransition} from './router.animation';
import {animate, group, query, stagger, style, transition, trigger} from "@angular/animations";
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 animations: [
 trigger('routerTransition', [ // 第一個(gè)參數(shù)是動(dòng)畫(huà)名稱 stateChangeExpr
  transition('* <=> *', [ // 指定什么時(shí)候執(zhí)行動(dòng)畫(huà)，狀態(tài)的來(lái)源可以是簡(jiǎn)單的對(duì)象屬性，也可以是由方法計(jì)算出來(lái)的值。重點(diǎn)是，我們得能從組件模板中讀取它。官網(wǎng)上有提供一些通配符，[傳送門](https://angular.cn/api/animations/transition)
  query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
  query('.block', style({ opacity: 0 }), { optional: true }),
  group([ // block executes in parallel
      query(':enter', [style({ transform: 'translateX(100%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))], { optional: true }),
      query(':leave', [style({ transform: 'translateX(0%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))], { optional: true })
     ]),
   query(':enter .block', stagger(400, [style({ transform: 'translateY(100px)' }),
      animate('1s ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 })),
    ]), { optional: true }),
  ])
 ]),
]
})
export class AppComponent {
 public exp = '';
 gg(outlet) { // 傳遞進(jìn)入的組件的信息
 console.log(outlet.activatedRouteData.state);
 return outlet.activatedRouteData.state;
 }
}

效果動(dòng)圖在最后。

比對(duì)著官網(wǎng)給的API，總結(jié)一下動(dòng)畫(huà)部分~

我是按自己的理解說(shuō)的，有不對(duì)的地方還請(qǐng)多多指教，共勉！O(∩_∩)O~

stateChangeExpr

即動(dòng)畫(huà)名稱，它的屬性值可以是字符串也可以是函數(shù)，若是函數(shù)，則每次狀態(tài)發(fā)生改變都會(huì)重新執(zhí)行，若函數(shù)返回true，則對(duì)應(yīng)的動(dòng)畫(huà)就會(huì)執(zhí)行。

transition

它里面的動(dòng)畫(huà)只在滿足條件時(shí)執(zhí)行，過(guò)了這個(gè)點(diǎn)它就變回原始樣式了，

state

可以保持動(dòng)畫(huà)樣式

:enter 、 :leave

即對(duì)應(yīng)void => * 、 * => void 狀態(tài)

例子二

app.component.html

<div [@queryAnimation]="goAnimate()">
 <h1>Title</h1>
 <div class="content">
 Blah blah blah
 </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import {animate, group, query, stagger, state, style, transition, trigger} from "@angular/animations";
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 animations: [
 trigger('queryAnimation', [
  transition('* => *', [
   query('h1', style({ opacity: 0 , color: 'red'})),
   query('.content', style({ opacity: 0, color: 'green', width: '100px', height: '100px', border: '1px solid red' })),
   query('h1', animate(1000, style({ opacity: 1, color: ' blue' }))),
   query('.content', animate(1000, style({ opacity: 1, width: '50px', height: '100px', border: '10px solid green'})),
    {optional: true}),
 ]),
  transition(':leave', [
  style({color: 'pink'}),
  animate(2000)
  ])
]),
]
})
export class AppComponent {
 public gg: string;
 constructor() {
 }
 goAnimate() {
 return true;
 }
}