Repository: angular
Issue: [@angular/animations] sequence non-intuitively/erroneously merges non-animated query() calls into single initial call
Labels: type: bug/fix,area: animations,freq1: low,P3

<!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

Oh hi there! 😄

To expedite issue processing please search open and closed issues before submitting a new one.
Existing issues often contain information about workarounds, resolution, or progress updates.

🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅-->


# 🐞 bug report

### Affected Package
<!-- Can you pin-point one or more @angular/* packages as the source of the bug? -->
<!-- ✍️edit: --> 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
<!--
Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/fork/angular-issue-repro2
-->
<!-- ✍️--> https://stackblitz.com/...

<!--
If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue.
A good way to make a minimal reproduction is to create a new app via `ng new repro-app` and add the minimum possible code to show the problem. 
Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
-->

The code I've been using to reach this conclusion can be seen in [this file](https://github.com/MagnusBrzenk/ng7-material-boilerplate/blob/010-animationsContinued/src/app/core/animations/route-change.animations.ts) 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](https://github.com/angular/angular/issues/27577), but I find this undesirable merging to occur not just with the display property, but others as well (e.g. `position`)