Angular2 searches for and resets the button for a live animation, and angular2 for a live Animation

Angular2 searches for and resets the button for a live animation, and angular2 for a live Animation

Requirement: Add a search and reset transfer animation to the Project Management page.

The first thought was to use angular2's animations attribute.

// project.component.tsimport {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.tsimport {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';}

Bind an animation to an HTML Template

<tr *ngFor="let project of projects" [@projectIn]="state"><tr *ngFor="let project of projects" [@projectIn]="state">

You can also set a rotation effect for the reset button and search button.

The simplest solution is to use the bootstrap library in the project to change the I tag inside the button when searching or resetting;

First, transform the HTML template;

<Button type = "button" class = "btn searchbtn btn-primary" (click) = "search (); getProjects (pagecount. value, 1, projectName. value) "> <I [ngClass] = 'searchclass' >{{ searchValue }}</I> </button> // search button <button (click) = "reset (); getProjects (); projectName. value = ''; "type =" button "class =" btn-primary "> <I [ngClass] =" resetClass "> </I> </button> // reset button <button type = "button" class = "btn searchbtn btn-primary" (click) = "search (); getProjects (pagecount. value, 1, projectName. value) "> <I [ngClass] = 'searchclass' >{{ searchValue }}</I> </button> // search button <button (click) = "reset (); getProjects (); projectName. value = ''; "type =" button "class =" btn-primary "> <I [ngClass] =" resetClass "> </I> </button> // reset button

Modify ts files

ResetClass: string = 'fa-repeat '; searchClass: string = ''; searchValue: string = 'search'; reset () {this. resetClass = 'fa fa-repeat fa-spin'; setTimeout () => this. resetClass = "fa-repeat", 2000);} search () {this. searchValue = ''; this. searchClass = 'fa fa-repeat fa-spin'; setTimeout () => {this. searchClass = ''; this. searchValue = 'search';}, 2000)} resetClass: string = 'fa fa-repeat'; searchClass: string = ''; searchValue: string = 'search'; reset () {this. resetClass = 'fa fa-repeat fa-spin'; setTimeout () => this. resetClass = "fa-repeat", 2000);} search () {this. searchValue = ''; this. searchClass = 'fa fa-repeat fa-spin'; setTimeout () => {this. searchClass = ''; this. searchValue = 'search';}, 2000 )}

The principle is simple and crude, that is, click the trigger function to change the CSS value, and restore the original CSS value in 2 seconds ..

If you want to add a pop-up window, you can use the ready-made swalert library;

// Add the following code swal ({title: 'loading', type: 'success ', timer: 1000, showConfirmButton: false,}) directly in getprojects ,}). catch () =>{}); // triggers a pop-up animation after each data acquisition. // Add the following code swal ({title: 'loading', type: 'success ', timer: 1000, showConfirmButton: false,}) directly in getprojects ,}). catch () =>{}); // triggers a pop-up animation after each data acquisition.

The basic effect has been achieved. Now, the effect is copied to each component.

Excuse me ???

Since it is necessary to reuse, abstract the search box and reset button into components.

The new directory is as follows:

// Add the following code to app. module. ts:

import {QbcSearchComponent} from './component/qbc-search/qbc-search.component';import {QbcResetComponent} from './component/qbc-reset/qbc-reset.component';declarations: [ QbcSearchComponent,QbcResetComponent]

// Add the following code to 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 Add the following code 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 = 'search'; constructor () {} search (value) {this. searchValue = ''; this. searchClass = 'fa fa-repeat fa-spin'; setTimeout () => {this. searchClass = ''; this. searchValue = 'search';}, 2000) this. searchEmitter. emit (value); swal ({title: 'loading ', type: 'success', timer: 1000, showConfirmButton: false ,}). catch () =>{}) ;}// Add the following code to the 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 = 'search'; constructor () {} search (value) {this. searchValue = ''; this. searchClass = 'fa fa-repeat fa-spin'; setTimeout () => {this. searchClass = ''; this. searchValue = 'search';}, 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 = "Enter the name" 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 = "Enter the name" 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>

 
Next we need to rewrite the project HTML

// Projects.html // replace the original search box code with qbc-search. <Qbc-search (searchEmitter) = search (pagecount. value, 1, $ event)> </qbc-search> // projects.html // replace the original search box code with qbc-search. <Qbc-search (searchEmitter) = search (pagecount. value, 1, $ event)> </qbc-search>

Then the project TS File

// Projects. component. ts // You can also directly call the getProjects method in the template. One is to modify the template later, and the other is to modify the TS file. Search (pageSize, page, name) {this. getProjects (pageSize, page, name);} // projects. component. ts // You can also directly call the getProjects method in the template. One is to modify the template later, and the other is to modify the TS file. Search (pageSize, page, name) {this. getProjects (pageSize, page, name );}

Qbc-reset implementation methods are similar and will not be described in detail. Next let's take a look at how animations can be reused.

// Try it first. Can I put it in the app. component. ts animations: [trigger ('fadin', [state ('active', style ({transform: 'translatex (0) ', opacity: 1 })), transition ('void => * ', [style ({transform: 'translatex (500px)', opacity: 0 }), animate ('1s audio-in-out')]),] // try it first. component. ts animations: [trigger ('fadin', [state ('active', style ({transform: 'translatex (0) ', opacity: 1 })), transition ('void => * ', [styl E ({transform: 'translatex (500px) ', opacity: 0}), animate ('1s audio-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!

It seems that this method is not feasible. We should replace it with native CSS before we figure out the global reuse mechanism of angular2 animation.

Create an animation.css

. FadeIn {animation: fadeIn progress-in-out 1.5 s 1; // The parameters are as follows: animation name easing function animation time animation running times} @ keyframes fadeIn {0% {opacity: 0; transform: translateX (500px);} 100% {opacity: 1; transform: translateX (0 );}}. fadeIn {animation: fadeIn progress-in-out 1.5 s 1; // The parameters are as follows: animation name easing function animation time animation running times} @ keyframes fadeIn {0% {opacity: 0; transform: translateX (500px);} 100% {opacity: 1; transform: translateX (0 );}}

Reference the CSS file directly in the project, and add the class name fadeIn to the template;

//projects.component.tsstyleUrls: ['./projects.css', '../animation.css']//projects.html<tr *ngFor="let project of projects" class="fadeIn">//projects.component.tsstyleUrls: ['./projects.css', '../animation.css']//projects.html<tr *ngFor="let project of projects" class="fadeIn">

The implementation result is as follows:

There is nothing more simple about iron. I don't know CSS3. Don't fix those moths with me.

Of course !!!

// Projects.html // The bootstrap library helps you write it, just fill in the class <tr * ngFor = "let project of projects" class = "animated fadeInRight"> // projects.html // The bootstrap library helps you write it, just enter the class <tr * ngFor = "let project of projects" class = "animated fadeInRight">

The above is the Angular2 search and reset button transfer animation introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in time. Thank you very much for your support for the help House website!