Transition Animation not working in Angular 5

Question

I am working on an Angular 5 app which needs a slide-in/slide-out sidenav.

Trying to use animation states to get this effect. The state css is getting applied correctly and the div moves in and out, however it is jumpy i.e. the 1500ms ease-out animation is not working.

Desired effect

I've imported the BrowserAnimationsModule and added it to imports in app.module.ts

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

viewer.component.html

<div id="app-container" *ngIf="supported">
  <div class="container">
    <div class="main-viewport">
      <app-viewer-container viewer_mode=true></app-viewer-container>
    </div>
    <div class="side-bar-container" [@slideInOut]="sidebarState">
      <div class="nav-toggle-btn">
        <div class="btn" (click)="toggleMenu()">
        </div>
      </div>
      <!-- <app-parameter-viewer globals=true></app-parameter-viewer> -->
    </div>
  </div>
</div>

viewer.component.ts

@Component({
  selector: 'app-viewer',
  templateUrl: './viewer.component.html',
  styleUrls: ['./viewer.component.scss'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)',
      })),
      state('out', style({
        transform: 'translate3d(70%, 0, 0)'
      })),
      transition('in <=> out', animate('1500ms ease-out'))
    ]),
  ]
})
export class ViewerComponent implements OnInit {
  // only relevant code added
  sidebarState:string;

  toggleMenu(){
    this.sidebarState = this.sidebarState  == 'out' ? 'in' : 'out';
  }
}

Things I've tried

Tried using the NoopAnimationsModule instead of the BrowserAnimationModule
Tried adding 'display:block' to the side-bar-container div based on this question ()
Tried adding web-animations-js
Tried removing the ease-in-out animation all together and doing just animate(1500ms)
Tried removing the inner child component in side-bar-container incase that's what is not animating
Tried using animate(1.5s) and animate(1500) instead of 1500ms
Tried shifting the toggle button outside the animated container
Reinstalled @angular/animations and @angular/platform-browser

Not sure what to do next! Any help would be really appreciated!

score 0 · Answer 1 · answered May 14 '18 at 12:42

0

It might be because you didn't initialize the state in the component :

export class ViewerComponent implements OnInit {

sidebarState = 'out';

   toggleMenu(){
      this.sidebarState = this.sidebarState  == 'out' ? 'in' : 'out';
   }
}

answered May 14 '18 at 12:42

br.julien

3,420
2
23
44

score 0 · Answer 2 · answered May 15 '18 at 07:49

0

I was just having this problem. The problem was that @angular/animation was a different version (6.0.0) from @angular/core(5.2.0). Just used "ng update @angular/core" to update to Angular 6. The information about Angular 6 can be found on their blog: https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Perhaps this might be your problem as well?

answered May 15 '18 at 07:49

Brandon Murch

1

both @angular/core and @angular/animations are 5.2.10. I thought it was a package conflict too and tried reinstalling the packages but no success. maybe i should just update everything to the latest version now – iamaatoh May 15 '18 at 08:00

Transition Animation not working in Angular 5

2 Answers2