Angular animation not properly encapsulated from child component

[ibrahimxcool]

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

Yes

Description

If ParentComponent has an animation name XYZ and childComponent has the same animation name XYZ but different transition effect. Then the animation wont run properly.

app html, css, ts code respectively

<button (click)="toggleAnimation()">Animate Box</button>
<app-green  [@XYZ] *ngIf="showGreenBox"></app-green>
<div [@XYZ] class="test" *ngIf="showGreenBox"></div>

app-green{
 display: block;
}
.test {
  width: 200px;
  height: 200px;
  background-color: green;
  margin: 20px;
}

...
  animations: [
    trigger('XYZ', [
      transition(':enter', [style({ opacity: 0 }), animate(500)]),
      transition(':leave', [animate(500, style({ opacity: 0 }))]),
    ]),
  ],
})
export class AppComponent {
  public showGreenBox = false;

  toggleAnimation() {
    this.showGreenBox = !this.showGreenBox;
  }
}

green html, css, ts code respectively

<div></div>

div {
  width: 200px;
  height: 200px;
  background-color: green;
  margin: 20px;
}

...
  animations: [
    trigger('XYZ', [
      transition(':enter', [
        style({ transform: 'translateX(200%)' }),
        animate(280),
      ]),
      transition(':leave', [
        animate(280, style({ transform: 'translateX(200%)' })),
      ]),
    ]),
  ],
...

https://user-images.githubusercontent.com/69388870/150659205-4973e21d-d119-4f80-b307-50648900ef14.mp4

Changing the animation name of childComponent solves this problem

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-fxfbvh?file=src%2Fapp%2Fapp.component.html

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/forms": "^12.2.5",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "rxjs": "^7.3.0",
    "tslib": "^2.3.1",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular/cli": "~11.0.4",
    "@angular/compiler-cli": "~11.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

Anything else?

No response