Angular2搜索和重置按钮过场动画
需求:给项目管理页面加上搜索和重置的过场动画。
最先想到的就是利用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搜索和重置按钮过场动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下...2016-01-02
- javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求,今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法,感兴趣的朋友一起学习吧...2015-12-14
- 这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要介绍了Angular2搜索和重置按钮过场动画,需要的朋友可以参考下...2017-05-27
- 下面小编就为大家带来一篇JS判断键盘是否按的回车键并触发指定按钮点击操作的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-02-19
- 带搜索功能下拉框在项目中经常会用到,下面小编把实现代码分享到脚本之家平台,供大家参考...2016-05-13
- 本文给大家分享一段JS实例代码介绍动态创建按钮的方法,需要的朋友参考下本文...2016-02-01
- javascript点击按钮需求,在项目开发过程中经常遇到,本文通过一段代码给大家分享javascript代码判断点击第几个按钮,对本文感兴趣的朋友一起学习吧...2015-12-14
- 本文给大家分享一段jquery代码实现滑动按钮开关的效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下...2016-12-02
- 这篇文章主要介绍了ThinkPHP使用getlist方法实现数据搜索功能,结合实例形式较为详细的分析了thinkPHP基于getlist实现根据给定条件进行数据的读取、显示等相关操作技巧,需要的朋友可以参考下...2017-05-21
- 这篇文章主要介绍了PHP 搜索查询功能的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-12-02
- 这篇文章主要介绍了Angularjs material 实现搜索框功能的相关资料,需要的朋友可以参考下...2016-03-10
- 这篇文章主要介绍了浅析Yii2 GridView实现下拉搜索教程的相关资料,需要的朋友可以参考下...2016-04-23
详解在ASP.NET Core中使用Angular2以及与Angular2的Token base身份认证
这篇文章主要介绍了详解在ASP.NET Core中使用Angular2以及与Angular2的Token base身份认证,有兴趣的可以了解一下。...2021-09-22浅析Yii2 GridView 日期格式化并实现日期可搜索教程
这篇文章主要介绍了Yii2 GridView 日期格式化并实现日期可搜索教程的相关资料,需要的朋友可以参考下...2016-04-23- 本文的内容主要是想帮助那些想学习Angular2的朋友们,因为我自己在玩Angular2时碰到了不少坑,而且Angular2语法一直处于变化中,让人很头疼。不过也怪不了Anguar2,因为它现在是处于并长期处于alpha阶段,下面就通过本文来学习Angular2的搭建环境和开发吧。...2016-10-20
- 这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-16
JavaScript实现清空(重置)文件类型INPUT元素值的方法
这篇文章主要介绍了JavaScript实现清空(重置)文件类型INPUT元素值的方法,结合实例形式分析了javascript清空input文本框的常用方法与实现技巧,需要的朋友可以参考下...2016-11-22