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

最先想到的就是利用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搜索和重置按钮过场动画，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# angular2搜索和重置按钮  # Angular4.0动画操作实例详解  # Angular4如何自定义首屏的加载动画详解  # 基于Angular.js实现的触摸滑动动画实例代码  # 给angular加上动画效遇到的问题总结  # 利用CSS3在Angular中实现动画  # AngularJS中实现显示或隐藏动画效果的方式总结  # 使用ngView配合AngularJS应用实现动画效果的方法  # 在AngularJS应用中实现一些动画效果的代码  # 详解Angular路由动画及高阶动画函数  # 就好  # 复用  # 帮你  # 请输入  # 可以直接  # 小编  # 写好  # 依次为  # 后期  # 在此  # 就不  # 你想  # 并在  # 就把  # 给大家  # 我不会  # 来个  # 项目管理  # 最简单  # 再加 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何生成URL和重定向？（路由助手函数）  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  网站制作企业,网站的banner和导航栏是指什么？  潮流网站制作头像软件下载,适合母子的网名有哪些？  音乐网站服务器如何优化API响应速度？  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  黑客如何利用漏洞与弱口令入侵网站服务器？  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  高端网站建设与定制开发一站式解决方案 中企动力  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  敲碗10年！Mac系列传将迎来「触控与联网」双革新  利用vue写todolist单页应用  Laravel如何实现模型的全局作用域？（Global Scope示例）  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Laravel如何创建自定义Artisan命令？（代码示例）  如何用PHP快速搭建高效网站？分步指南  Laravel如何实现用户注册和登录？（Auth脚手架指南）  网页设计与网站制作内容,怎样注册网站？  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  详解jQuery停止动画——stop()方法的使用  免费网站制作appp,免费制作app哪个平台好？  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  如何破解联通资金短缺导致的基站建设难题？  如何生成腾讯云建站专用兑换码？  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  移动端脚本框架Hammer.js  Python结构化数据采集_字段抽取解析【教程】  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  Bootstrap CSS布局之列表  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  如何在橙子建站上传落地页？操作指南详解  Laravel如何与Inertia.js和Vue/React构建现代单页应用  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  如何用好域名打造高点击率的自主建站？  郑州企业网站制作公司,郑州招聘网站有哪些？  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  高端企业智能建站程序：SEO优化与响应式模板定制开发  进行网站优化必须要坚持的四大原则  高端云建站费用究竟需要多少预算？  android nfc常用标签读取总结  千库网官网入口推荐 千库网设计创意平台入口  Laravel中的Facade(门面)到底是什么原理