Animations on parent component break ":leave" animation built-in into child component

This issue has been created since 2022-11-24.

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

animations

Is this a regression?

No

Description

When you have animations set up in a parent component like this

@Component({
  selector: 'app-parent',
  styleUrls: ['./parent.component.scss'],
  templateUrl: './parent.component.html',
  // ↓ This property breaks inner :leave animations.
  animations: [/* The content doesn't matter */]
})
export class ParentComponent {}

child's :leave animation doesn't work:

@Component({
  selector: 'app-child',
  styleUrls: ['./child.component.scss'],
  templateUrl: './child.component.html',
  encapsulation: ViewEncapsulation.None,
  host: { tabindex: '0', '[@childAnimation]': '' },
  animations: [
    trigger('childAnimation', [
      transition(':enter', [group([ ... ])]),
      transition(':leave', [group([ ... ])])
    ])
  ]
})
export class ChildComponent {}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-sz1b4r

Please provide the exception or error you saw

I saw a lack of a beautiful ":leave" animation :(

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

Angular CLI: 14.2.10
Node: 18.12.1 (Unsupported)
Package Manager: yarn 1.22.19 
OS: win32 x64

Angular: 14.2.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker    

Package                            Version     
------------------------------------------------------------
@angular-devkit/architect          0.1402.10   
@angular-devkit/build-angular      14.2.10     
@angular-devkit/core               14.2.10     
@angular-devkit/schematics         14.2.10     
@angular/cdk                       14.2.7      
@angular/cli                       14.2.10     
@angular/fire                      7.4.1       
@angular/material                  14.2.7      
@angular/material-moment-adapter   14.2.7      
@schematics/angular                14.2.10     
rxjs                               7.5.7       
typescript                         4.8.4       
webpack                            5.75.0

Anything else?

I don't know if this is a regression. I added more info on how to reproduce the issue in the Stackblitz.

TheNightmareX wrote this answer on 2022-11-24

True. This issue bothered me for a long time and I thought it was a feature 😂

Btw I think that the project that I'm working on in this repository might interest you. I'm implementing the "Reply" application of Material Studies with a lot of super cool animations!

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
version detection problem when conflicting dependencies 1 2019-01-10 2022-11-20
Doesn't work with extras_require and tests_require 14 2018-10-08 2022-11-20
Output redirection raise BrokenPipeError 3 2018-12-06 2022-11-20
Test 17: "Domain Impersonation" failed: 'NoneType' object has no attribute 'group' . Use --debug to show entire stack trace. 6 2022-03-22 2022-11-18
Load actual config.schema.yml into pi_mqtt_gpio/__init__.py 2 2021-02-22 2022-11-03
Very slow Preview with Raspberry 3B+ 7 2019-10-17 2022-07-30
Solver - Error Creating Marker Deviation AnimCurves 1 2021-07-04 2022-09-16
Leaderboard, clickable user 2 2022-05-31 2022-10-25
Create Tasks from Geotagged Photos 11 2022-06-01 2022-11-06
Add support for HM-RC-2-PBU-FM 2 2022-02-14 2022-09-14
Update Visualizer Display Style 0 2021-05-04 2022-10-02
Error in geotiff.js - Module parse failed: Unexpected token (36:721) 1 2021-10-20 2022-11-01
Polyfills or fallbacks for browser use with Webpack 5 4 2021-09-10 2022-11-01
Error: Module not found: ./dist/txml is not exported 4 2021-10-06 2022-11-01
Proposal to withdraw AY.89 because it nests within AY.4 and is maybe not even monophyletic 9 2022-01-10 2022-11-29
Cluster: demo-cluster-cloudformation Resolved with errorsThe given SSH key name was invalid 0 2021-12-17 2022-11-02
Error with command-line argument python3 ./scripts/create_cfn_stack.py \ ...... 3 2021-12-16 2022-10-30
version specific coverage pragmas 0 2020-11-10 2022-08-24
How can i forward traffic to the same port 0 2022-09-23 2022-11-06
ZYNQ7000 How to Virtualize ?Whether it has the capacity? 1 2022-07-16 2022-11-29
thirdparty and download unrecognized 2 2021-11-11 2022-08-13
Instant rendering of markdown 3 2021-04-12 2022-11-13
Single camera dataset has test results with all Ranks at 1.0 with mAp changing 1 2022-04-21 2022-11-18
Add a manpage 0 2021-02-13 2022-01-12
Suggestions don't work 5 2022-01-27 2022-08-06
Cherrytre crashes on startup - ValueError: invalid literal for int() with base 10: '' 8 2022-02-20 2022-08-14
Support ligatures 0 2021-07-31 2022-01-13
Clarify CRL requirements for End Entity Certificates 22 2020-07-15 2022-11-17
Word to PDF - Form is crossed 0 2021-06-24 2022-11-24
Same requested results 0 2022-09-30 2022-11-13
error while adding hexbin or grid layer in react keplerGL app 27 2021-09-03 2022-11-29
Add documentation for shades 1 2021-11-06 2022-11-24
Plugin: Configure Hotkeys fails to report 4 2021-09-06 2022-07-27
websocket相关 1 2021-09-14 2022-01-16
Datepicker error 'Class not found' on show 1 2021-11-17 2022-10-22
nutui-upload限制上传一张图片失败时 (maximum=1),无法清空上传失败的图片,导致无法再次点击上传按钮上传 0 2022-11-26 2022-12-01
Steps 步骤条: 支持通过slots自定义icon 0 2022-11-29 2022-12-01
Troubleshoot to consume CRD for specs 0 2022-08-12 2022-10-02
CVAR cl_assetLoadWarningMsThreshold should be set to 1000ms by default 9 2022-07-29 2022-11-18
Editing an already created rule in RBU modifies the rule definition 0 2022-01-19 2022-11-29
Do not require wss when target host is loopback address 2 2021-05-13 2022-11-20
CommandError: To modify pip, please run the following command 0 2022-09-03 2022-11-27
Somebody please help me... 5 2017-11-18 2022-11-29
Output for `aten::_native_multi_head_attention` appears inconsistent with entry in `native_functions.yaml` 0 2022-06-30 2022-07-03
Commit 32fbeb1 introduced 7-10x slowdown for th.inverse on large batch matrices. 7 2022-06-30 2022-09-28
Inquiry regarding plugin logic 1 2020-07-26 2022-11-10
generate proguard rules 0 2021-04-04 2022-11-04
tests fail with pylint 1.7+ 2 2017-08-09 2022-11-16
[15] account: new record for Invoices Analysis report should not be created 0 2022-05-12 2022-10-16
[Logs UI] Improve UX for Data View selection in Settings page 1 2022-02-01 2022-11-22