@dario-piotrowicz Fantastic news that this may be a query issue. A mild inconvenience can be a simple hurdle to one dev and a brick wall to another, especially when the docs say it should work.

You have no idea how grateful I am that you’re working on this.

Mike awarded Dario:🏅(participant)

And I’ll have a freshly minted🥇1st place medal for you at this ticket’s closing ceremony!

Thanks @dario-piotrowicz - as discussed I will close this issue and we should continue with #44253

Hi, I’ve been spending a bunch of time on this, and I’ve got a bit down a rabbit hole, but I just found out something I find it pretty interesting so I thought of sharing it here as someone could find it interesting too 😃

I’m 100% that it is a query thing and it’s not related to routing or anything of the sort, it is related on how angular adds elements to the dom, and based on that they can be detected/queried as entering elements for animation or not, the issue here is that the elements detected as “entering” for animation are either the component’s host or elements with structural directives, which our child elements are not

this made me find a new workaround (if you want to use ":enter" and not "@*", etc…), if we just put a structural directive to the child elements we want to animate, angular will just handle them differently and they will be actually detected as entering query elements

Any structural directive will do, like an *ngIf="true" or a useless *ngFor:

(as you can see in this new stackblitz: https://stackblitz.com/edit/angular-lndzuf?file=src%2Fapp%2Fapp.component.html)

So yeah it’s not like it’s solved or anything, I just wanted to share this small tidbit, and also provide a new (simpler? 🤷‍♂️) workaround to get the animation working 🙂

@petebacondarwin @angular/* packages seem to be very tightly controlled by Google. Why not communicate that @angular/animations is, and we can quibble about wording here, unmaintained. I’d wager that those who rely on it would like to know that it has been “significantly de-prioritized” quietly. Why not loudly request community or corporate support?

We know where the bugs, flaws, and deficits are. Not sounding the alarm about them outside of issue trackers and using an “ALL ENGINES GO!” tone in the documentation/communications is unhelpful and infuriating for the people who have to dig around in the code to see what’s really going on.

I love Angular. However, the communication issues (policies?) combined with actual bugs make me understand why there’s no amount of money most JS, React, and Vue developers can be paid to learn Angular.

It’s a shame! Angular+NgRx are the best way to structure code for the web. I’ve described using Angular as running with rocks in my shoes. Very nice shoes that help you run very fast to be sure, but, the rocks eventually leave your toes bloody.

Angular has a lot of issues. More than most open source projects. While features like optional modules have been getting a lot of attention, modules are not one of the issues keeping developers from adopting or learning Angular. Poor communication, bugs, and moving slowly on common functionality/features large and small (Zone.js+async/await, no passive HostListeners w\o hacks, etc.) are keeping developers out.

It’s also hard to get a deep insight into what’s actually going on with Angular development. That information is scattered across GitHub, Twitter, Medium, a smattering of newsletters, courses, and videos, or, is internal to Google and not communicated to external developers at all.

The Angular blog hasn’t been updated since early June and the Twitter account is often surface level DR/PR. Reading the Twitter account, the most robust Angular news aggregator, you’d have no idea that a major Angular package like animations is unmaintained. How do you stay truly informed?

From the outside it seems like the day-to-day problems/bugs are here to stay.

I’ve never seen a large open source project run like Angular. It’s not working.

Here’s a positive example: This is how I keep up to date with Django development:

Typically there are a few posts similar to this on the homepage that contains a link to extensive, developer friendly, release notes for each release.

To compare, Angular’s homepage does not feature the latest releases (LTR, latest, or dev/next) and Angular’s release notes are less useful. New features link to, sometimes, several GitHub issues and release notes are not linked anywhere on the Angular homepage. I think this is by design? Hiding the version numbers to keep from scaring off new developers?

I think it’s time for an Angular Foundation similar in structure to Django, Python, or GNOME’s. Thoughts?

Yes this all sounds good. Please go ahead @dario-piotrowicz - and thanks again!!

I’ll close this issue once you create the new one.

I’m unable to implement my team’s visual+motion design using Angular animations because basic, documented, functionality is broken. It’s been two years since this featured was accepted as broken, is there any kind of an update?

By the way, this would also explain why your other workaround solves the problem…

When the parent view is “entered” it will evaluate the expressions on any structural directives within its template. If any of those result in their view being displayed, those views will also receive the :enter transition.

So if we think about it like this: :enter and :leave are only triggered on the root element of a view that is being added or removed, then it makes sense that querying for :enter on child elements of a view that is entering will not return anything.

In that case, the way I found for it to work was to just scope the query to be elements that are contained by :enter. In other words:

query(':enter *', [animateChild()], { optional: true }),

This works in the standard example we are using here: https://stackblitz.com/edit/angular-w6muoa?file=src%2Fapp%2Fanimations.ts

And if you wanted to be more precise then you could do something like:

    query(':enter @redToGreen', [animateChild()], { optional: true }),

See https://stackblitz.com/edit/angular-kljx26?file=src%2Fapp%2Fanimations.ts

@dario-piotrowicz I did not understand it like that at first. It makes sense now.

@dario-piotrowicz I think you’re on the right way. It still seems weird to me that @* works but :enter doesn’t as it exists just for this purpose.

Note: I don’t work with Angular anymore so I won’t be of much help anymore.

@Ploppy3 Thank you very much for your input 🙂

Yes I agree with you that @* being ok but :enter not, does not feel very correct, but it sort of turns the bug from “broken functionality with no workarounds” to “mild inconvenience with an easy workaround” from my point of view 🙂

Also as I said I still want to investigate the querying issue, hopefully something interesting will turn out from that 🙂👍

Anyway thanks a bunch, we’ll take it from here then 😄

Same too 😦

Running into the same issue

I’m having the exact same problem. I’ve tried just about every possible way I can think of to get animations to run on the pages that are entering/leaving and it just ignores them.

Edit 1:

It appears to ignore all child animations completely if the animation is on an element of the page being transitioned. However if I apply an animation to the page component via host binding, then use animateChild in THAT trigger (essentially going 2 levels deep with animateChild), it does something. Unfortunately, what it does is completely remove the leaving page instantly with no animations at all. But hey, at least something changed…

@Ploppy3 This is not a bug. Here is a updated link. which works as you expected. stackblitz The reason why the div is not animated is when your page is in a enter state, the div element is already entered in its parent earlier ! so the ‘@redToBlack’ bind to the div won’t work as expected,because the div is not match the ‘:enter’ state.

The right way to do is bind the ‘redToBack’ to the _ page_: and modify the animation definition using query to find the div ,then animate it ！