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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
js 通用订单代码
Dec 23 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
vue里input根据value改变背景色的实例
Sep 29 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
javascript实现日历效果
Jun 17 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 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
PHP中创建并处理图象
2006/10/09 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python连接mysql实例分享
2016/10/09 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
django下创建多个app并设置urls方法
2020/08/02 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
英文版区域经理求职信
2013/10/23 职场文书
普通话宣传标语
2014/06/26 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
中班上学期个人总结
2015/02/12 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
python中validators库的使用方法详解
2022/09/23 Python