最先想到的就是利用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模板；
{{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???
既然要复用，那就把搜索框和重置按钮抽象成组件吧。
新建目录如下
{
this.searchClass = '';
this.searchValue = '搜索';
},2000)
this.searchEmitter.emit(value);
swal({
title: 'loading',}).catch(()=>{});
}
}
//qbc-search.component.ts 添加如下代码
import { Component,}).catch(()=>{});
}
}
//qbc-search.html
{{searchValue}}
//qbc-search.html
{{searchValue}}
接下来需要改写项目HTML
然后是项目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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/39072.html