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


Posted in Javascript onMay 24, 2017

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

最先想到的就是利用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???

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

新建目录如下

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

// 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">

实现效果如下

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

老铁还有没有更简单的,我不会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搜索和重置按钮过场动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 #Javascript
angularjs中ng-bind-html的用法总结
May 23 #Javascript
vue.js实现价格格式化的方法
May 23 #Javascript
js编写选项卡效果
May 23 #Javascript
jQuery日期范围选择器附源码下载
May 23 #jQuery
详解JavaScript数组过滤相同元素的5种方法
May 23 #Javascript
强大的 Angular 表单验证功能详细介绍
May 23 #Javascript
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
汉字转化为拼音(php版)
2006/10/09 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
layui使用label标签的方法
2019/09/14 Javascript
python海龟绘图实例教程
2014/07/24 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
pygame实现弹球游戏
2020/04/14 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
一套PHP的笔试题
2013/05/31 面试题
经销商会议欢迎词
2014/01/11 职场文书
经典婚礼主持词
2014/03/13 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
教师一帮一活动总结
2014/07/08 职场文书
企业团队精神心得体会
2016/01/19 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js