Skip to content

Animations: transition between states broken when combined with query #28654

@dirkluijk

Description

@dirkluijk

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Is this a regression?

Not sure.

Description

state('state1', style({ /*...*/ })),
state('state2', style({ /*...*/ })),
transition('state1 <=> state2', [
  animate(500),
  query(/* ... */)
])

Does not work as expected. It does not transition to the states.

However, when swapping the animate() and query(), it does work:

state('state1', style({ /*...*/ })),
state('state2', style({ /*...*/ })),
transition('state1 <=> state2', [
  query(/* ... */),
  animate(500)
])

🔬 Minimal Reproduction

https://stackblitz.com/edit/animation-bug

🌍 Your Environment

Angular Version:

Angular 7

Anything else relevant?
See also: https://stackoverflow.com/questions/51726044/angular-transition-between-states-isnt-animated-correctly-if-animate-is-place/54631683#54631683

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: animationsfreq2: mediumtype: bug/fix

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions