欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 17:45:46
需求:给项目管理页面加上搜索和重置的过场动画。 最先想到的就是利用angular2的animations属性。 // project.component.ts...

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

最先想到的就是利用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搜索和重置按钮过场动画,希望对大家有所帮助