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

2024-04-05 18:12:30

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

最先想到的就是利用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搜索和重置按钮过场动画

需求:给项目管理页面加上搜索和重置的过场动画. 最先想到的就是利用angular2的animations属性. // project.component.ts import {trigger, state, style, animate, transition} from '@angular/animations'; @Component({ selector: 'projects', template: require('./projects.html'), styleUrls: ['./pr
Bootstrap按钮功能之查询按钮和重置按钮

Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮</title> <link rel=&qu
layui 点击重置按钮, select 并没有被重置的解决方法

如下所示: 点击重置时,输入框被重置为空,而账号 select元素并没有被重置. // 重置事件 $("#reset").click(function () { $("#searchContent").val(""); $("#selectKey").val(""); form.render(); }) 调用一下 form.render();即可为什么表单不显示? 当你使用表单时,Layui会对selec
angular2系列之路由转场动画的示例代码

Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画. Angular2的动画主要是和@Component结合在了一起. animations元数据属性在定义@Component装饰.就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制. 一.在app.mudule.ts中引入: import { BrowserAnimationsModule } from '@angular/platfor
Jquery和CSS实现选择框重置按钮功能

很多时候我们都会用到一个下拉选择,还有就是重置的功能,今天我们就给大家带来用Jquery配合CSS实现的这个功能. 代码如下: HTML <select> <option value="">Select a color..</option> <option value="red">Red</option> <option value="green">Green</opt
JSP 重置按钮清空传入的表单数据实例

参考: jquery 表单清空 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 这个js是可以实现清空表单中填写及传入的值的,但要注意: 1.jq实现,此<input />不能放在form表单内!: 2.直接写在onclick属性中即可
element-ui封装一个Table模板组件的示例

大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便.有兴趣可以看看:vuetify data table. 上面是一个经典的用element-ui开发的
Element Plus组件Form表单Table表格二次封装的完整过程

目录前言 Form表单的封装简述正常的使用开始封装① 开始封装② 开始封装③ 开始封装④ 完整封装代码⑤ 配置项类型文件配置项文件 form表单组件文件 page-search组件文件 role页面组件文件结语 Table表格的封装简述正常使用开始封装① 开始封装② 开始封装③ 完整封装代码④ 配置项类型文件配置项文件 table表单组件文件 page-table组件文件 user页面组件文件结语前言直至今天,看了一下别人写的代码,才发现以前自己写的代码太垃圾,所以在这
Android实现定制返回按钮动画效果的方法

今天我们来讲一讲Andorid中如何定制返回按钮的动画效果.我将结合实际应用来阐述如何使用. 首先来看一个效果截图,有一个搜索按钮在一个页面的顶部: 我之前实现的方式是和百度/Google首页搜索的效果一样的,类似web开发中的ajax请求,结果直接在当前页面显示出来(下拉效果).后来参考了众多APP之后发现都是进入到一个新的页面,所以我也就改过来试试..废话说多了.. 那我们点击了搜索框之后呢,会进入到一个新的activity,这里的动画效果很简单,直接使用overridePendingTra
ElementUI实现el-form表单重置功能按钮

目录业务场景: 效果演示: 业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el-form :inline="true" :model="queryParams" ref="queryForm"> 第二:在点击重置按钮执行的方法中,执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryP

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

相关推荐

随机推荐