Angular 17 Animation - Synch both sides on slide left/right

Question

I'm trying to add an animation to Angular 17 application but it is not working as expected.

Basically there are two divs, side by side and left side is hidden by *ngIf when a button is pressed. Animation from left side works as expected but right div does not follow, it is resized only when animation completes.

Here is the sample code: https://stackblitz-starters-uwgcaa.stackblitz.io

How do I make animation work in both sides?

Thanks in advance.

Answer 1

Please change the animation from translateX to margin-left, looked up the CSS tutorials and found the solution!

import {
  animate,
  group,
  query,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  BrowserAnimationsModule,
  provideAnimations,
} from '@angular/platform-browser/animations';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="container">
      <div class="menu" *ngIf="showMenu" [@slideInOut]="showMenu">Menu</div>
      <div class="content">Content<button (click)="toggleMenu()">Teste</button></div>
    </div>
  `,
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({ marginLeft: '-100%' }),
        animate('200ms', style({ marginLeft: '0px' })),
      ]),
      transition(':leave', [
        animate('200ms', style({ marginLeft: '-100%' })),
      ]),
    ]),
  ],
  imports: [CommonModule],
})
export class App {
  name = 'Angular';
  showMenu = true;

  toggleMenu() {
    this.showMenu = !this.showMenu;
  }
}

bootstrapApplication(App, { providers: [provideAnimations()] });

stackblitz

---

References

1. JSfiddle demo
2. article