CODEWITHSUNDEEP
angularangular-animations
iamaatoh
iamaatoh

Reputation: 796

Transition Animation not working in Angular 5

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 enter image description here

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

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

ng --version

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

Upvotes: 0

Views: 2845

Answers (2)

Brandon Murch
Brandon Murch

Reputation: 1

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?

Upvotes: 0

br.julien
br.julien

Reputation: 3460

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';
   }
}

Upvotes: 0

Related Questions