大佬教程收集整理的这篇文章主要介绍了Angular4升级动画无法正常工作,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
的package.json
"dependencies": { "@angular/animations": "^4.0.0","@angular/common": "^4.0.0","@angular/compiler": "^4.0.0","@angular/compiler-cli": "^4.0.0","@angular/core": "^4.0.0","@angular/forms": "^4.0.0","@angular/http": "^4.0.0","@angular/platform-browser": "^4.0.0","@angular/platform-browser-dynamic": "^4.0.0","@angular/platform-server": "^4.0.0","@angular/router": "^4.0.0","angular2-modal": "2.0.2","core-js": "2.4.1","font-awesome": "4.7.0","jquery": "3.2.1","ng2-translate": "2.5.0","rxjs": "5.2.0","typescript": "^2.2.2","web-animations-js": "^2.2.2","zone.js": "0.7.4" },
app.component.ts
import { Component } from '@angular/core'; import { Router,ActivatedRoute,ActivatedRouteSnapshot } from '@angular/router'; import { BaseComponent } from '../base/base.component'; import { ViewContainerRef,ViewEncapsulation } from '@angular/core'; import { trigger,transition,style,animate,state } from '@angular/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @Component({ SELEctor: 'verification',templateUrl: 'app.component.html',providers: [BaseComponent],animations: [ trigger('trans',[ // what happens when toggleState is true // state('true',style({ opacity: 1,transform: 'translateX(0)',offset: 0 })),state('true',style({ transform: 'translateY(0)' })),// what happens when toggleState is false // state('false',style({ opacity: 0,transform: 'translateX(100%)',offset: 0,position:'absolute',right:-9999 })),state('false',style({ transform: 'translateY(20%)' })),// transition transition('0 => 1',animate('0.2s 100ms ease-in')),transition('1 => 0',animate('0.3s 25ms ease-out')) ]) ] }) export class VerificationComponent { public verifysuccess:Boolean; constructor(private router: Router,private route: ActivatedRoute,private base: BaseComponent) { this.verifysuccess = true; } }
app.component.html
<div class="clearfix"> <div class="BACkstretch"> </div> <div class="vefification"> <div class="verification-content"> <div class="verification-main p-20" [@trans]="verifysuccess"> <div *ngIf="verifysuccess"> <h3>YOU'RE ALL SET</h3> <div class="form-group"> <button class="btn-resend-email" type="submit" (click)="verifysuccess=true">RESEND EMAIL</button> </div> </div> </div> </div> </div> </div>
app.modulte.ts
import { NgModule } from '@angular/core'; import { BrowserModule,title } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule,BrowserAnimationsModule,BootstrapModalModule,],declarations: [ //components VerificationComponent,] }) export class AppModule { }
以上是大佬教程为你收集整理的Angular4升级动画无法正常工作全部内容,希望文章能够帮你解决Angular4升级动画无法正常工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。