本文实例讲述了Angular4.0动画操作。分享给大家供大家参考，具体如下：

粗略的记录一下angular4的动画

先看一下angular中文网关于这个给的例子。

有两个组件home，about。 路径配置什么的这里就不细说了，之前的博文有说过，我就贴一下代码，很好理解的，

需要import的东西我先说一下，我只贴了使用动画要用的东西，其他的我省略了，

app.module.ts

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

在这个简单的例子里我要对app.component.html里的内容进行animate，所以我的

app.component.ts

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [] // 这里代码我省略了，先说一下结构，后面说具体实现。})

以上就是需要写动画实现的基本结构，下面贴实现这个例子的代码。为了方便阅读，我把代码解释就贴在代码旁边

例一：

这是路由配置：

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即等号左边即动画名称，注意中括号和@符不能省略，等号右边是一个函数，也可以是变量，满足条件便可以让动画进行，一个动画可以多次使用 -->

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', [ // 第一个参数是动画名称 stateChangeExpr transition('* <=> *', [ // 指定什么时候执行动画，状态的来源可以是简单的对象属性，也可以是由方法计算出来的值。重点是，我们得能从组件模板中读取它。官网上有提供一些通配符，[传送门](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) { // 传递进入的组件的信息 console.log(outlet.activatedRouteData.state); return outlet.activatedRouteData.state; }}

效果动图在最后。

比对着官网给的API，总结一下动画部分~

我是按自己的理解说的，有不对的地方还请多多指教，共勉！O(∩_∩)O~

• stateChangeExpr

即动画名称，它的属性值可以是字符串也可以是函数，若是函数，则每次状态发生改变都会重新执行，若函数返回true，则对应的动画就会执行。

• transition

它里面的动画只在满足条件时执行，过了这个点它就变回原始样式了，

• state

可以保持动画样式

• :enter 、 :leave

即对应void => * 、 * => void 状态

例子二

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; }}

这个gif有点卡，但是可以大概看出路由切换时是有动画的。这是上面两个例子的效果图

state只能放在trigger里，不能搁在transition里

目前就这么点，才看了一点，以后慢慢补充~~~

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。