I am facing a challenge with incorporating animations in Angular 2 using Visual Studio 2017. I believe there must be a simple solution that I am overlooking at the moment. My goal is to animate certain elements and I have been testing the animations by triggering them with a click event on a button, but unfortunately, nothing seems to be happening;
The content of my app.shared.module.ts file is as follows;
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/shared/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { ContactComponent } from './components/shared/contact/contact.component';
import { HeroComponent } from './components/shared/hero/hero.component';
import { FooterComponent } from './components/shared/footer/footer.component';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
ContactComponent,
HeroComponent,
FooterComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
NoopAnimationsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
This snippet shows how my component.html file looks like;
<div class="hero">
<div class="colour-overlay"></div>
<div class="row">
<div class="col-md-6">
<h2 [@fadeInAnimation]="state">TEST1</h2>
<button (click)="toggleMove()">Click Me!</button>
</div>
<div class="col-md-6">
<contact></contact>
</div>
</div>
</div>
Furthermore, here is part of my component.ts code;
import { Component } from '@angular/core';
import { fadeInAnimation } from '../../../animations/fadeIn.animation';
@Component({
selector: 'hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css'],
animations: [fadeInAnimation]
})
export class HeroComponent {
state: string;
constructor() {
this.state = 'inactive';
}
toggleMove() {
this.state = (this.state === 'inactive' ? 'active' : 'inactive');
}
}
The animation itself is defined here;
import { trigger, state, animate, transition, style } from '@angular/animations';
export const fadeInAnimation =
trigger('fadeInAnimation', [
transition('void => *', [
state('active', style({
opacity: 1,
transformX: 'transformX(0)'
})),
state('inactive', style({
opacity: 0,
transformX: 'transform(-100%)'
})),
transition('active => inactive', animate('300ms ease-out')),
transition('inactive => active', animate('300ms ease-in'))
]),
]);
If anyone can provide some insight into what might be going wrong here, I would greatly appreciate it.