Почему Angular возвращается в исходное состояние после анимации

Question

Я использую Angular 9.

Я пытаюсь экспортировать свою анимацию в моем приложении angular. Анимация идет хорошо, но мой элемент возвращается в исходное состояние css после анимации. Я пытаюсь расширить и сжать мои сиденав. Должен ли я установить «конечное состояние»?

// app/_animations/animations.ts

import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';

export const expandSideNav = animation([
  style({width: '100px'}),
  animate('1000ms',style({width: '300px'}))
]);

export const shrinkSideNav = animation([
  style({width: '300px'}),
  animate('1000ms', style({width: '100px'}))
]);

export const toggleSideNav = trigger('toggleSideNav', [
  transition('close => open', useAnimation(expandSideNav)),
  transition('open => close', useAnimation(shrinkSideNav))
]);

Вот мой app.component.ts

// app.component.ts

import { Component, HostBinding } from '@angular/core';
import { User } from './_models/user.model';
import { Router } from '@angular/router';
import { AuthenticationService } from './_services/authentication.service';
import { toggleSideNav } from './_animations/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [toggleSideNav]
})
export class AppComponent {
  title = 'qrieu-front';

  public currentUser: User;
  isOpenSideNav = 'open';

  constructor(
    private router: Router,
    private authenticationService: AuthenticationService
  ) {
    this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
  }

  toggleSideNav() {
    this.isOpenSideNav = this.isOpenSideNav === 'open' ? 'close' : 'open';
  }
} 

и наконец мой взгляд

// app.component.html

<!-- main app container -->
<app-top-menu></app-top-menu>

<div class="body-container">
  <div class="side-nav-menu-container mat-elevation-z2" [@toggleSideNav]="isOpenSideNav">
    <app-sidenav-menu (toggleSideNav)="toggleSideNav()" [sideNavState]="isOpenSideNav"></app-sidenav-menu>
  </div>
  <div class="main-content">
<!--    <router-outlet></router-outlet>-->
  </div>
</div>

В моем css установлен мой класс. Контейнер бокового меню до 300px.

Я видел много постов об этом, но все еще не могу понять, что я делаю здесь неправильно. Спасибо за вашу помощь