引言:给项目管理页面添加搜索和重置的过场动画。
开发过程
1.实现动画。
1.实现表单元素的入场动画。
最先想到的就是利用angular2的animations属性。PS：angular框架严格按照css module标准封装好的属性，自然省心更舒心。
1.在组件中引入animations,并写好进场动画
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// project.component.ts ... import {trigger, state, style, animate, transition} from '@angular/animations'; @Component({ ... animations: [ trigger('projectIn', [ // 定义动画名称 state('active', style({transform: 'translateX(0)', opacity: 1})), // 定义状态名与css属性。 transition('void => *', [ style({transform: 'translateX(500px)', opacity: 0}), animate('1s ease-in-out') // 入场动画 ]) ]), ] }) export class ProjectComponent{ state: tring = 'active'; } |
2. 将动画绑定在HTML模板上
|
1 2 |
<tr *ngFor="let project of projects" [@projectIn]="state"> |
效果暂时如下↓
3.欲详细了解animations,请点击传送门↓
https://angular.cn/docs/ts/latest/guide/animations.html
2.给重置按钮和搜索按钮也来个旋转的特效吧。
最简单的方案就是利用项目中的bootstrap库，在搜索或者重置时改变按钮内部的i标签;
1. 首先改造HTML模板；
|
1 2 3 4 5 6 |
<button type="button" class="btn searchbtn btn-primary"(click)="search(); getProjects(pagecount.value, 1, projectName.value)"><i [ngClass]='searchClass'>{{searchValue}}</i></button> // search 按钮 <button (click)="reset(); getProjects();projectName.value = '';" type="button" class="btn btn-primary"><i [ngClass] = "resetClass"></i></button> // reset 按钮 |
2. 改造ts文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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值。。
3.实现弹窗效果
如果你想再加个弹窗的话可以利用现成的swalert库；
|
1 2 3 4 5 6 7 8 9 |
// 直接在getprojects里面加上如下代码 swal({ title: 'loading', type: 'success', timer: 1000, showConfirmButton: false, }).catch(()=>{}); //即每次获取数据后触发弹窗动画。 |
实现效果如下
2.抽象成组件
1.抽象search和reset组件。
1. 新建目录如下
2. 引入并在app module上注册 qbc-search-component。
|
1 2 3 4 |
// app.module.ts 添加如下代码 import {QbcSearchComponent} from './component/qbc-search/qbc-search.component'; declarations: [ QbcSearchComponent] |
3.编写QbcSearchComponent
1.编写ts文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//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(()=>{}); } } |
2.编写html文件
|
1 2 3 4 5 6 7 |
//qbc-search.html <div class="input-group"> <input type="text" placeholder="请输入名称" class="searchinput form-control" #name> <span class="input-group-btn"><button type="button" class="btn searchbtn btn-primary" (click)="search(name.value);"><i [ngClass]='searchClass'>{{searchValue}}</i></button></span> </div> |
3. 接下来需要改写项目HTML
|
1 2 3 4 |
//projects.html //将原先的搜索框代码部分用qbc-search代替。 <qbc-search (searchEmitter)=search(pagecount.value,1,$event)></qbc-search> |
4. 然后是项目TS文件
|
1 2 3 4 5 6 |
// projects.component.ts // 其实也可以直接在模板中调用getProjects方法，差不多。一个是后期要修改模板，一个是要修改TS文件。 search(pageSize, page, name) { this.getProjects(pageSize, page, name); } |
qbc-reset实现方式一样，按上面步骤来，概不赘述
2.抽象animation
1.尝试放入app.component.ts全局复用.
|
1 2 3 4 5 6 7 8 9 10 |
// 先试试可不可以放入app.component.ts animations: [ trigger('fadeIn', [ state('active', style({transform: 'translateX(0)', opacity: 1})), transition('void => *', [ style({transform: 'translateX(500px)', opacity: 0}), animate('1s ease-in-out') ]) ]), ] |
|
1 2 3 4 |
//projects.html [@fadeIn] = "state" // error The provided animation trigger "c1#fadeIn" has not been registered! |
抛出错误，fadeIn没有注册,看来这种方式不行,在没弄清楚angular2动画全局复用机制前，我们先用原生CSS代替。
2. 尝试用css实现.
1.编写css样式文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.fadeIn{ animation: fadeIn ease-in-out 1.5s 1; // 参数依次为： 动画名称 缓动函数 动画时间 动画运行次数 } @keyframes fadeIn{ 0% { opacity: 0; transform: translateX(500px); } 100%{ opacity: 1; transform: translateX(0); } } |
2. 直接在项目里引用CSS文件，并在模板里面添加class名fadeIn;
|
1 2 3 4 5 |
//projects.component.ts styleUrls: ['./projects.css', '../animation.css'] //projects.html <tr *ngFor="let project of projects" class="fadeIn"> |
实现效果如下↓
3.bootstrap实现。
|
1 2 3 4 |
// projects.html // bootstrap库帮你写好了，填写class就好 <tr *ngFor="let project of projects" class="animated fadeInRight"> |
老铁说效果巨丑，你这都还是定好了时间的。万一服务器卡数据老不出来你就转两秒？改改改。
2.改造动画
1.抽象loading动画组件
1.编写loading html文件
|
1 2 3 4 5 6 7 8 9 10 11 |
// qbc-loading.html <div *ngIf='loading' class="loading-bottom" style="align-items: center; background:rgba(0,0,0,0.2) none repeat scroll !important;bottom:0;box-sizing:border-box;display:flex;left:0;position:fixed;right:0;top:0;z-index:1060"> <div class="sk-spinner sk-spinner-wave loading"> <div class="sk-rect1"></div> <div class="sk-rect2"></div> <div class="sk-rect3"></div> <div class="sk-rect4"></div> <div class="sk-rect5"></div> </div> </div> |
2.编写loading component文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//qbc-loading.component.ts //别忘了在APP MODULE注册qbcloading,概不赘述; import { Component, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'qbc-loading', template: require('./qbc-loading.html'), }) export class QbcLoadingComponent { loading: boolean = false; constructor() {} show() { this.loading = true; } hide() { this.loading = false; } } |
2.改写reset和search组件
|
1 2 3 4 5 6 |
// qbc-reset.component.ts // 把settimeout那句删了,添加下面方法 initReset(){ this.resetClass = 'fa fa-repeat'; } |
|
1 2 3 4 5 6 7 |
// qbc-search.component.ts // 把settimeout那句删了,添加下面方法 initSearch() { this.searchClass = ''; this.searchValue = '搜索'; } |
3.改写projects组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
//projects.component.ts import { QbcSearchComponent } from '../common/qbc-search/qbc-search.component'; import { QbcResetComponent} from '../common/qbc-reset/qbc-reset.component'; import { QbcLoadingComponent} from '../common/qbc-loading/qbc-loading.component'; import { Component, OnInit, ViewChild} from '@angular/core'; ... init: boolean = false; @ViewChild(QbcSearchComponent) qbcSearch ; @ViewChild(QbcResetComponent) qbcReset; @ViewChild(QbcLoadingComponent) qbcLoading; constructor(private projectService: ProjectService, public router: Router) { } ngOnInit(): void { this.qbcLoading.show(); this.getProjects(); } getProjects(pageSize = 10, page = 1, name = ''): void { this.projectService.getProjects(pageSize, page, name) .subscribe(data => { this.qbcLoading.hide(); if(this.init){ this.initChild() // 这里有个小坑，不能直接调用initChild，会出现undifind，我最开始以为是this指向问题，后面不管是bind 还是this赋给变量都没用，才想到可能是子组件没有初始化完毕的问题。 } this.pageMeta = data['meta']['pagination']; let array = []; for (let i = 1; i <= this.pageMeta['total_pages']; i++) { array.push(i); } this.pageNumbers = array; let projects = []; for (let i = 0; i < this.pageMeta['count']; i++) { projects.push(data[i]); } this.projects = projects; this.init = true; }, (error: Object) => { } ); } ... reset() { this.qbcLoading.show(); this.getProjects(); this.qbcSearch.clear(); } search(pageSize, page, name) { this.qbcLoading.show(); this.getProjects(pageSize, page, name); } initChild(){ this.qbcSearch.initSearch(); this.qbcReset.initReset(); } } |
再看下效果
3.优化结构;
然后导师老铁又说animate.css 放在app文件夹里不科学;
既然是全局复用的，那就放在assets/styles/目录下如下图;
修改app.component.ts
|
1 2 3 4 |
// app.component.ts // styleUrls 添加 '../assets/styles/animation.css; |
最后调整下文件结构 将qbc组件系列转入common文件夹如下图
