Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ivy: Animation events removed when node's position is changed

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Is this a regression?

Yes, without ivy animation events don't removed.

Description

Animation events is removed from AnimationTransitionNamespace during change node’s position inside ViewContainerRef. This causes issue inside mat-tab-group when tab’s order is changed because displaying content depends on animation events. When node’s index is changed a node detaches from old position and inserts into new one. During detach animation events are removed, but not added when node inserts back into new position.

🔬 Minimal Reproduction

StackBlitz GitHub Repo

Steps to reproduce:

Open StackBlitz
Enable Ivy in settings
Click on rearrange button
Click on Tab 2. There is no content.

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:10

Top GitHub Comments

2reactions

DustinPhamcommented, Mar 15, 2022

@Bettaswamy @Bschitter I found a working example of the mat-tab reordering here if you both still needed it: https://stackblitz.com/edit/angular-ivy-bvhnt7?file=src%2Fapp%2Fapp.component.ts

found from this git issue: https://github.com/angular/components/issues/13572

2reactions

Bschittercommented, Jan 6, 2022

I’m also having the same issue with mat-tab-group on Angular 13.1.1 and with Ivy. Really don’t want to turn off Ivy… Edit: As I see, from version 12 you cannot turn it off anymore.

Top Results From Across the Web

Using Animation Events - Unity - Manual

To delete an Event, select it and press the Delete key, or right-click on it and select Delete Event. Animation Events are shown...

Process Modeling - Axon.ivy 7.0 | Designer Guide

Artifacts in those projects are changed frequently. ... Delete - Removes the selected node from the project. ... Adjust the engine animation speed....

JavaScript Data Grid: Grid Events - AG Grid

This is a list of the events that the grid raises. ... The tool panel size has been changed. ... A pivot column...

components/CHANGELOG.md at main · angular ... - GitHub

Breaking Changes. cdk. The deprecated angular/cdk/testing/protractor entry-point has been removed.

Element: animationend event - Web APIs | MDN

The animationend event is fired when a CSS Animation has completed. If the animation aborts before reaching completion, such as if the ...