CODEWITHSUNDEEP
animationangular5
Husk Rekoms
Husk Rekoms

Reputation: 530

Angular 5 Animation - ease-in / ease-out time

I am trying to do a simple transition using angular 5. The transition itself is working but when I try to adjust the ease-in / ease out period of the transition. My setup is based off of the angular documentation, so I am really at loss as to why the transition time isn't changing.

component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
    trigger('homeState', [

      state('hide', style({
        backgroundColor: '#eee',
        transform: 'translateX(0%)'
      })),
      state('show', style({
        backgroundColor: '#cfd8dc',
        transform: 'translateX(100%)'
      })),
      transition('show => hide', animate('6000ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))

    ])
  ]
})

component.html

<h1 [@homeState]="stateName">{{title}}</h1>
<button (click)="toggle()"></button>

The toggle function changes between the show and hide states. Can someone please point me in the right direction? thanks.

UPDATE:

Okay, so I have done some more digging. I downloaded the source code of the animations. The source code has the easing effect working. So i copied that code over to my project and still the ease effect is not working. But when I copied my original code over to the animations project everything works. 

Your global Angular CLI version (1.7.4) is greater than your local
version (1.6.5). The local Angular CLI version is used.

Upvotes: 2

Views: 8791

Answers (1)

Husk Rekoms
Husk Rekoms

Reputation: 530

Okay, I finally figured it out. I had the noop testing module as well as the regular angular animations in my file (this is my fault, I copied someone else's setup without fully understanding what I was doing). The noop is a no operation module used solely for testing.

more info: What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

Once I removed this from my app.module.ts all was good:

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

I hope this helps someone down the road.

Upvotes: 4

Related Questions