5
मैंने हाल ही में अपने कोणीय ऐप को कोणीय 2.4.0 से कोणीय 4.0.0 तक अपग्रेड किया है। मैंने इस link का पालन किया है यह बिना किसी त्रुटि के संकलित है, केवल 3 चेतावनियां देता है। यहां चेतावनी का स्क्रीनशॉट संलग्न है। enter image description here लेकिन एनीमेशन काम नहीं कर रहा है। कृपया जांचें कि मैं क्या खो रहा हूं। अग्रिम धन्यवाद।कोणीय 4 अपग्रेड एनीमेशन काम नहीं कर रहा
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 { }
धन्यवाद यह मेरे लिए भी काम करता है। मैंने राज्यों को राज्यों के समान मूल्यों को स्ट्रिंग और असाइन करने के लिए बदल दिया। तो यह काम किया। मुझे लगता है कि इसे बुलियन मूल्यों और राज्यों के साथ काम करना चाहिए, मुझे नहीं पता कि यह बुलियन मूल्यों के साथ क्यों काम नहीं करता है। –
मुझे खुशी है कि इससे मदद मिली। मैं मानता हूं कि इसे संख्या/बूलियन के साथ काम करना चाहिए। लेकिन मुझे आश्चर्य हुआ कि उन्होंने अपने अपग्रेड नोट्स में इसका जिक्र नहीं किया। –