Angular 6 - Animation does not transition. It just jumps directly to state

Question

I am trying to get two animations to activate at the same time.

It's a big project, so I will only display the Component's HTML and Typescript files in question.

The first animation is to fade in an opaque black overlay. That works perfectly fine. The problem is with the second animation. I would like the pane to slide in from the right, simultaneously. Only after the animation for the overlay is finished does the pane show, but it doesn't transition like I want it to, it just jumps straight to the state.

I'm not too sure what the problem is, but I am hoping that I could get some help with this.

Thanks.

HTML

<div id="fileManager" class="rOverlay" [@rightPaneOverlayState]="paneOverlayState" [ngStyle]="{'height': paneStatus ? '100vh' : '0'}">
  <div class="olClose" (click)="hidePane()"><i class="fas fa-times"></i></div>
  <div class="rolInner">
    <div class="olContent" [@rightPaneState]="paneState" [ngStyle]="{'display': paneStatus ? 'block' : 'none'}">
      <div class="olContentInner">
        <app-project-note-pane></app-project-note-pane>
      </div>
    </div>
  </div>
</div>

TypeScript

import { Component, OnInit } from '@angular/core';
import {RightPaneService} from '../services/right-pane-service';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-right-pane',
  templateUrl: './right-pane.component.html',
  styleUrls: ['./right-pane.component.css'],
  animations: [
    trigger('rightPaneState', [
      state('collapsed', style({
        transform: 'translateX(650px)'
      })),
      state('expanded', style({
        transform: 'translateX(0)'
      })),
      transition('collapsed => expanded', [
        animate('1s', style({ transform: 'translateX(650px)' }))
      ])
    ]),

    trigger('rightPaneOverlayState', [
      state('hidden', style({
        backgroundColor: 'rgba(0, 0, 0, 0.0)'
      })),
      state('visible', style({
        backgroundColor: 'rgba(0, 0, 0, 0.7)'
      })),
      transition('hidden => visible', [
        animate('1s')
      ]),
      transition('visible => hidden', [
        animate('1s')
      ]),
    ])
  ]
})
export class RightPaneComponent implements OnInit {

  paneState = 'collapsed';
  paneOverlayState = 'hidden';

  paneExpanded = false;

  private paneCollapsing = false;

  constructor(private rightPaneService: RightPaneService) { }

  ngOnInit() {
  }

  // [ngStyle]="{'height': paneStatus ? '100vh' : '0'}"

  get paneStatus(): boolean {
    if (this.rightPaneService.paneExpanded && !this.paneCollapsing) {
      this.paneState = 'expanded';
        this.paneOverlayState = 'visible';
    } else {
      this.paneOverlayState = 'hidden';
      this.paneState = 'collapsed';
    }

    return this.rightPaneService.paneExpanded;
  }

  public hidePane() {
    this.paneCollapsing = true;
    this.paneOverlayState = 'hidden';
    this.paneState = 'collapsed';
    setTimeout(() => {
      this.rightPaneService.paneExpanded = false;
      this.paneCollapsing = false;
    }, 1000);
  }
}

Angular 6 - Animation does not transition. It just jumps directly to state

0 Answers0