I just started with Angular animations. And wan't to animate a \*ngIf with it. Sadly it does't work :(. I don't get an error message. I tried several solutions from here, nothing worked. Also removing one of the animations doesn't change anything or removing one of the \*ngIf-blocks entirely doesn't change anything. It just doesn't work, and there is also no error in the terminal or in the devtools visible.

Here the animations definition from the typescript.

```js
animations: [
  trigger('inOutPaneAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(-100%)' })),
  transition(':enter', [animate('750ms ease-in-out')]),
  transition(':leave', [animate('600ms ease-in-out')]),
]),
trigger('inOutActiveItemAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(100%)' })),
  transition(':enter', [animate('600ms ease-in-out')]),
  transition(':leave', [animate('750ms ease-in-out')]),
]),

```

The HTML looks like this:

```html
<div
  *ngIf="activeItem"
  [@inOutActiveItemAnimation]
  class="bt3-locations__active-item"
>
  <app-location-active-item
    [isSingleLocation]="isSingleLocation"
    [location]="activeItem"
    [showRouteLabel]="showRouteLabel"
  ></app-location-active-item>
</div>
<div *ngIf="!activeItem" [@inOutPaneAnimation] #paneContent>
  <div
    *ngTemplateOutlet="
      locations.data.length > 1 ? multipleGroups : group;
      context: { data: getGroups(), group: 0 }
    "
  ></div>
</div>

```

The BrowserAnimationsModule is imported, into the the parent module.

```js
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { LocationItemComponent } from './location-item/location-item.component'; 
import { LocationsComponent } from './locations/locations.component';
import { LocationActiveItemComponent } from './location-active-item/location-active- 
item.component';
import { AccordionModule } from '../accordion/accordion.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
      LocationsComponent,
    LocationItemComponent,
    LocationActiveItemComponent,
  ],
  imports: [CommonModule, AccordionModule, BrowserAnimationsModule],
  exports: [],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

```