Angular2搜索和重置按钮过场动画

前端之家收集整理的这篇文章主要介绍了Angular2搜索和重置按钮过场动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求:给项目管理页面加上搜索和重置的过场动画。

最先想到的就是利用angular2的animations属性

*',[ style({transform: 'translateX(500px)',opacity: 0}),animate('1s ease-in-out') ]) ]),] }) export class ProjectComponent{ state: tring = 'active'; } // project.component.ts import {trigger,] }) export class ProjectComponent{ state: tring = 'active'; }

将动画绑定在HTML模板上

给重置按钮和搜索按钮也来个旋转的特效吧。

最简单的方案就是利用项目中的bootstrap库,在搜索或者重置时改变按钮内部的i标签;

首先改造HTML模板;

404_17@{{searchValue}} // search 按钮 // reset 按钮 // search 按钮 // reset 按钮

改造ts文件

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) }

原理简单粗暴 即点击触发函数改变CSS值,2秒后恢复原有CSS值。。

如果你想再加个弹窗的话可以利用现成的swalert库;

{}); //即每次获取数据后触发弹窗动画。 // 直接在getprojects里面加上如下代码 swal({ title: 'loading',}).catch(()=>{}); //即每次获取数据后触发弹窗动画。

基本效果已经实现了,现在把效果复制到每个组件去

Excuse me???

既然要复用,那就把搜索框和重置按钮抽象成组件吧。

新建目录如下

// app.module.ts 添加如下代码

// app.module.ts 添加如下代码

{ this.searchClass = ''; this.searchValue = '搜索'; },2000) this.searchEmitter.emit(value); swal({ title: 'loading',}).catch(()=>{}); } } //qbc-search.component.ts 添加如下代码 import { Component,}).catch(()=>{}); } } //qbc-search.html
404_17@{{searchValue}}
//qbc-search.html
404_17@{{searchValue}}

接下来需要改写项目HTML

搜索框代码部分用qbc-search代替。 //projects.html //将原先的搜索代码部分用qbc-search代替。

然后是项目TS文件

调用getProjects方法,差不多。一个是后期要修改模板,一个是要修改TS文件。 search(pageSize,page,name) { this.getProjects(pageSize,name); } //projects.component.ts // 其实也可以直接在模板中调用getProjects方法,差不多。一个是后期要修改模板,一个是要修改TS文件。 search(pageSize,name); }

qbc-reset实现方式雷同就不赘述了。下面看看animations如何复用。

看来这种方式不行,在没弄清楚angular2动画全局复用机制前,我们先用原生CSS代替。

建立animation.css

名称 缓动函数 动画时间 动画运行次数 } @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;

实现效果如下

老铁还有没有更简单的,我不会CSS3,别跟我整那些幺蛾子。

当然有!!!

以上所述是小编给大家介绍的Angular2搜索和重置按钮过场动画。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章