CODEWITHSUNDEEP
angularangular-animations
Agustin Garcia
Agustin Garcia

Reputation: 139

Slide in and out a component with Angular animations

Using Angular 6 and @angular/animations module, I'm trying to implement a custom sidenav element that must slide in and out smoothly from the main page by clicking a button.

As you can see here this element hides to the left smoothly, but not the other way, where it just dissapears.

Here is the code for the animation:

animations: [
    trigger('slideMenu', [
      state('false', style({
        transform: 'translateX(-250px)'
      })),
      state('true', style({
        transform: 'translateX(0)'
      })),
      transition('true <=> false', animate('400ms ease-in-out'))
    ])
  ]

The full project can be seen in https://stackblitz.com/edit/slide-demo.

How could I make the component to slide to both directions correctly?

Edit
Relevant html using the component: 

<app-home-sidenav [@slideMenu]="isVisible ? true : false" [hidden]="!isVisible"></app-home-sidenav>  
  <div class="home-content">
    <div class="home-label">
      <span>This content should expand upon hiding sidenav</span>
    </div>
    <button (click)="onToggle()">
    Toggle Sidenav
  </button>
</div>

Upvotes: 1

Views: 8648

Answers (1)

Doguita
Doguita

Reputation: 15703

That happens because you are using [hidden]="!isVisible" in your component which is evaluated without any delay and hide the sidebar before the animation.
If you remove the [hidden] attribute and set your 'false' state like this it will get you in the right way: 

state('false', style({
    transform: 'translateX(-250px)',
    display: 'none'
}))

But as far as I can tell you will need another animation if you want the main content to spread together with the sidebar.

Upvotes: 4

Related Questions