[@angular/animations] sequence non-intuitively/erroneously merges non-animated query() calls into single initial call

[MagnusBrzenk]

🐞 bug report

Affected Package

The issue is caused by package @angular/....

This is a problem with @angular/animations

Description

A clear and concise description of the problem...

I'm trying to create a complex angular animation with the sequence([]) function. What I am trying to achieve requires carefully setting various CSS properties on different elements in a well-defined series of events.

My efforts are being messed up because sequence([]) seems to combine individual query() steps that lack an animate() function into ONE query() call. So a sequence that looks like this:

sequence([
    query('.my-class', [
        style({
            display: 'none'
        })   
    ]),
    // ...
    // 1. Various other animated steps
    // ...
    query('.my-class', [
        style({
            display: 'block'
        })   
    ]),
    // ...
    // 2. Various other animated steps
    // ...
])

... ends up acting like this:

sequence([
    query('.my-class', [
        style({
            display: 'none',
            display: 'block'
        })   
    ]),
    // ...
    // 1. Various other animated steps
    // ...
    // ...
    // 2. Various other animated steps
    // ...
])

🔬 Minimal Reproduction

https://stackblitz.com/...

The code I've been using to reach this conclusion can be seen in this file within the ['010-animationsContinued' branch].

The salient animation is triggered on any route change (e.g. clicking between 'data' and 'about' in the toolbar).

Note: this might be related to #27577, but I find this undesirable merging to occur not just with the display property, but others as well (e.g. position)