Angular2搜索和重置按钮过场动画
程序员文章站
2022-04-28 17:45:46
需求:给项目管理页面加上搜索和重置的过场动画。
最先想到的就是利用angular2的animations属性。
// project.component.ts...
需求:给项目管理页面加上搜索和重置的过场动画。
最先想到的就是利用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" 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 按钮 <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 按钮
改造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 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> //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>
接下来需要改写项目html
//projects.html //将原先的搜索框代码部分用qbc-search代替。 <qbc-search (searchemitter)=search(pagecount.value,1,$event)></qbc-search> //projects.html //将原先的搜索框代码部分用qbc-search代替。 <qbc-search (searchemitter)=search(pagecount.value,1,$event)></qbc-search>
然后是项目ts文件
//projects.component.ts // 其实也可以直接在模板中调用getprojects方法,差不多。一个是后期要修改模板,一个是要修改ts文件。 search(pagesize, page, name) { this.getprojects(pagesize, page, name); } //projects.component.ts // 其实也可以直接在模板中调用getprojects方法,差不多。一个是后期要修改模板,一个是要修改ts文件。 search(pagesize, page, name) { this.getprojects(pagesize, page, name); }
qbc-reset实现方式雷同就不赘述了。下面看看animations如何复用。
// 先试试可不可以放入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') ]) ]), ] // 先试试可不可以放入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') ]) ]), ] //projects.html [@fadein] = "state" // error the provided animation trigger "c1#fadein" has not been registered! //projects.html [@fadein] = "state" // error the provided animation trigger "c1#fadein" has not been registered!
看来这种方式不行,在没弄清楚angular2动画全局复用机制前,我们先用原生css代替。
建立animation.css
.fadein{ animation: fadein ease-in-out 1.5s 1; // 参数依次为: 动画名称 缓动函数 动画时间 动画运行次数 } @keyframes fadein{ 0% { opacity: 0; transform: translatex(500px); } 100%{ opacity: 1; transform: translatex(0); } } .fadein{ animation: fadein ease-in-out 1.5s 1; // 参数依次为: 动画名称 缓动函数 动画时间 动画运行次数 } @keyframes fadein{ 0% { opacity: 0; transform: translatex(500px); } 100%{ opacity: 1; transform: translatex(0); } }
直接在项目里引用css文件,并在模板里面添加class名fadein;
//projects.component.ts styleurls: ['./projects.css', '../animation.css'] //projects.html <tr *ngfor="let project of projects" class="fadein"> //projects.component.ts styleurls: ['./projects.css', '../animation.css'] //projects.html <tr *ngfor="let project of projects" class="fadein">
实现效果如下
老铁还有没有更简单的,我不会css3,别跟我整那些幺蛾子。
当然有!!!
// projects.html // bootstrap库帮你写好了,填写class就好 <tr *ngfor="let project of projects" class="animated fadeinright"> // projects.html // bootstrap库帮你写好了,填写class就好 <tr *ngfor="let project of projects" class="animated fadeinright">
以上所述是小编给大家介绍的angular2搜索和重置按钮过场动画,希望对大家有所帮助
上一篇: Android仿微信多人音视频通话界面
下一篇: 我妹小时候养了两只只花兔子