这篇文章主要介绍Angular2如何实现搜索和重置按钮过场动画，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联主营龙华网站建设的网络公司,主营网站建设方案,
成都app开发,龙华h5
微信小程序搭建,龙华网站营销推广欢迎龙华等地区企业咨询
需求：给项目管理页面加上搜索和重置的过场动画。
最先想到的就是利用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模板上
给重置按钮和搜索按钮也来个旋转的特效吧。
最简单的方案就是利用项目中的bootstrap库，在搜索或者重置时改变按钮内部的i标签;
首先改造HTML模板；
{{searchValue}}
// search 按钮
// reset 按钮
{{searchValue}}
// search 按钮
// 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
{{searchValue}}
