需求：给项目管理页面加上搜索和重置的过场动画。
最先想到的就是利用angular2的animations属性。
// project.component.ts import {trigger, state, style, animate, transition} from '@angular/animations'; @Component({ selector: 'projects', template: require('./projects.html'), styleUrls: ['./projects.css'], providers: [ProjectService], animations: [ trigger('projectIn', [ state('active', style({transform: 'translateX(0)', opacity: 1})), transition('void => *', [ style({transform: 'translateX(500px)', opacity: 0}), animate('1s ease-in-out') ]) ]), ] }) export class ProjectComponent{ state: tring = 'active'; } // project.component.ts import {trigger, state, style, animate, transition} from '@angular/animations'; @Component({ selector: 'projects', template: require('./projects.html'), styleUrls: ['./projects.css'], providers: [ProjectService], animations: [ trigger('projectIn', [ state('active', style({transform: 'translateX(0)', opacity: 1})), transition('void => *', [ style({transform: 'translateX(500px)', opacity: 0}), animate('1s ease-in-out') ]) ]), ] }) export class ProjectComponent{ state: tring = 'active'; }
将动画绑定在HTML模板上
<tr *ngFor="let project of projects" [@projectIn]="state"> <tr *ngFor="let project of projects" [@projectIn]="state">
给重置按钮和搜索按钮也来个旋转的特效吧。
最简单的方案就是利用项目中的bootstrap库，在搜索或者重置时改变按钮内部的i标签;
首先改造HTML模板；
<button type="button"(click)="search(); getProjects(pagecount.value, 1, projectName.value)"><i [ngClass]='searchClass'>{{searchValue}}</i></button> // search 按钮 <button (click)="reset(); getProjects();projectName.value = '';" type="button"><i [ngClass] = "resetClass"></i></button> // reset 按钮 <button type="button"(click)="search(); getProjects(pagecount.value, 1, projectName.value)"><i [ngClass]='searchClass'>{{searchValue}}</i></button> // search 按钮 <button (click)="reset(); getProjects();projectName.value = '';" type="button"><i [ngClass] = "resetClass"></i></button> // reset 按钮
改造ts文件
resetClass: string = 'fa fa-repeat'; searchClass: string = ''; searchValue: string = '搜索'; reset() { this.resetClass = 'fa fa-repeat fa-spin'; setTimeout(() => this.resetClass = "fa fa-repeat", 2000); } search() { this.searchValue = ''; this.searchClass = 'fa fa-repeat fa-spin'; setTimeout(() => { this.searchClass = ''; this.searchValue = '搜索'; }, 2000) } resetClass: string = 'fa fa-repeat'; searchClass: string = ''; searchValue: string = '搜索'; reset() { this.resetClass = 'fa fa-repeat fa-spin'; setTimeout(() => this.resetClass = "fa fa-repeat", 2000); } search() { this.searchValue = ''; this.searchClass = 'fa fa-repeat fa-spin'; setTimeout(() => { this.searchClass = ''; this.searchValue = '搜索'; }, 2000) }
原理简单粗暴 即点击触发函数改变CSS值，2秒后恢复原有CSS值。。
如果你想再加个弹窗的话可以利用现成的swalert库；
// 直接在getprojects里面加上如下代码 swal({ title: 'loading', type: 'success', timer: 1000, showConfirmButton: false, }).catch(()=>{}); //即每次获取数据后触发弹窗动画。 // 直接在getprojects里面加上如下代码 swal({ title: 'loading', type: 'success', timer: 1000, showConfirmButton: false, }).catch(()=>{}); //即每次获取数据后触发弹窗动画。
基本效果已经实现了，现在把效果复制到每个组件去
Excuse me???
既然要复用，那就把搜索框和重置按钮抽象成组件吧。
新建目录如下
// app.module.ts 添加如下代码
import {QbcSearchComponent} from './component/qbc-search/qbc-search.component'; import {QbcResetComponent} from './component/qbc-reset/qbc-reset.component'; declarations: [ QbcSearchComponent,QbcResetComponent]
// app.module.ts 添加如下代码
import {QbcSearchComponent} from './component/qbc-search/qbc-search.component'; import {QbcResetComponent} from './component/qbc-reset/qbc-reset.component'; declarations: [ QbcSearchComponent,QbcResetComponent] //qbc-search.component.ts 添加如下代码 import { Component, Output, EventEmitter} from '@angular/core'; import swal from 'sweetalert2'; @Component({ selector: 'qbc-search', template: require('./qbc-search.html'), }) export class QbcSearchComponent { @Output() searchEmitter = new EventEmitter(); searchClass: string = ''; searchValue: string = '搜索'; constructor() {} search(value) { this.searchValue = ''; this.searchClass = 'fa fa-repeat fa-spin'; setTimeout(() => { this.searchClass = ''; this.searchValue = '搜索'; }, 2000) this.searchEmitter.emit(value); swal({ title: 'loading', type: 'success', timer: 1000, showConfirmButton: false, }).catch(()=>{}); } } //qbc-search.component.ts 添加如下代码 import { Component, Output, EventEmitter} from '@angular/core'; import swal from 'sweetalert2'; @Component({ selector: 'qbc-search', template: require('./qbc-search.html'), }) export class QbcSearchComponent { @Output() searchEmitter = new EventEmitter(); searchClass: string = ''; searchValue: string = '搜索'; constructor() {} search(value) { this.searchValue = ''; this.searchClass = 'fa fa-repeat fa-spin'; setTimeout(() => { this.searchClass = ''; this.searchValue = '搜索'; }, 2000) this.searchEmitter.emit(value); swal({ title: 'loading', type: 'success', timer: 1000, showConfirmButton: false, }).catch(()=>{}); } } //qbc-search.html <div> <input type="text" placeholder="请输入名称" #name> <span><button type="button" (click)="search(name.value);"><i [ngClass]='searchClass'>{{searchValue}}</i></button></span> </div> //qbc-search.html <div> <input type="text" placeholder="请输入名称" #name> <span><button type="button" (click)="search(name.value);"><i [ngClass]='searchClass'>{{searchValue}}</i></button></span> </div>
接下来需要改写项目HTML