Why is my expand/collapse animation “jumping”?

I am working on an Angular 17 project with a Tailwind CSS-styled sidebar.

The expand/collapse functionality works as intended, but the animation is not as smooth as I would like. There is a noticeable “jump” in the animation, which disrupts the smooth transition I aim for. Ideally, the animation should smoothly transition from the top to bottom (and vice versa) without glitches.

Showcase of the problem: https://i.imgur.com/4RpEwYv.gif

My HTML Code:

<div class="flex h-screen bg-white">
  <aside class="w-72 bg-gray-900 shadow-lg flex flex-col">
    <!-- Navigation -->
    <nav class="p-4 pl-0 overflow-y-auto">
      @for (group of navigation; track $index) {
        <div class="mb-2" [class.pb-3]="$index != navigation.length - 1">
          <div class="flex flex-col">
            <div class="flex items-center justify-between pl-2 pr-0 cursor-pointer gap-2 w-[104%]" (click)="toggleGroup(group.category)">
              <div>
                <h3 class="px-0 mb-0 text-xs font-semibold text-gray-500 uppercase tracking-wider text-{{group.color}}-gradient">
                  {{ group.category }}
                </h3>
                <p class="text-xs text-gray-500 mb-0">{{ group.description }}</p>
              </div>
           </div>
          </div>

          <div class="mt-2 space-y-1 overflow-hidden" [@expandCollapse]="expandedGroups[group.category] ? 'expanded' : 'collapsed'">
            <div class="space-y-1">

              <!-- Show only 3 pages if group is not expanded & be able to expand it -->
              @for (page of (expandedGroups[group.category] ? group.pages : group.pages.slice(0, 3)); track $index) {
                <a [routerLink]="page.redirect_url"
                   class="flex items-center p-2 !text-slate-400 hover:bg-gray-500 rounded-lg transition-none hover:!text-white">
                  <div class="w-6 flex-shrink-0">
                    <fa-icon [icon]="page.icon"></fa-icon>
                  </div>
                  <span class="ml-3 text-[0.9rem]">{{ page.title }}</span>
                </a>
              }
            </div>
          </div>
        </div>
      }
    </nav>

  </aside>
</div>

TypeScript Code with Angular animation part:

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    NgOptimizedImage,
    RouterLink,
    FaIconComponent,
  ],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss',
  animations: [
    trigger('expandCollapse', [
      state('collapsed', style({
        height: '86px',
        overflow: 'hidden',
        opacity: 1
      })),
      state('expanded', style({
        height: '*',
        overflow: 'hidden',
        opacity: 1
      })),
      transition('expanded => collapsed', [
        style({ height: '*' }),
        animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)',
          style({ height: '96px' })
        )
      ]),
      transition('collapsed => expanded', [
        style({ height: '96px' }),
        animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)',
          style({ height: '*' })
        )
      ])
    ])
  ]
})
export class DashboardComponent {
  // it is filled, but commented out
  navigation = []

  expandedGroups: { [key: string]: boolean } = {};

  toggleGroup(category: string) {
    this.expandedGroups[category] = !this.expandedGroups[category];
  }

  constructor() {
      this.navigation.forEach(group => {
        this.expandedGroups[group.category] = false;
      });
  }