[Animations, Angular 5] Nested [@triggerName] fires when parent trigger is executed. Animation executes before its turn #20811
Description
I'm submitting a...
[ X ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
The issue in a nutshell: A nested @trigger animates when the parent animates, ignoring it's delay.
In the following SVG ( a lock), I have added animated parts to move it's elements and change the colour during the animation.
Right now, when the top lock part close (moves down) the child animation on the path fires too, while I have programmed it to wait 900ms before executing.
As you can see in the GIF, the top lock part turns red at the same time it slides down. Then the rest of the lock turns red later. They all use the same @fillState trigger, however the top part runs at the same time as it @lockState is executed.
It needs to 1) close the lock, 2) and then change colour. Not at the same time.
This was working in Angular 4.4.2
<svg class="icon-lock-open" viewBox="0 0 46 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="0.412 0.329 29.234 0.329 29.234 25.9964355 0.412 25.9964355"></polygon>
<polygon id="path-3" points="45.762 15.941 45.762 31.846 0 31.846 0 0.036 45.762 0.036"></polygon>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<g transform="translate(7.830000, 0.000000)" [@lockState]="state">
<path id="lock-top" fill="#38B872" [@fillState]="state" fill-rule="nonzero" d="M6.1862"></path>
</g>
<path id="lock-base-overlay" fill="#E8E9E8" [@lockFillState]="state" fill-rule="nonzero" d="M27.02"></path>
<g transform="translate(0.000000, 25.230000)">
<path id="lock-base" fill="#38B872" [@fillState]="state" fill-rule="nonzero" d="M3.255,"></path>
</g>
<path id="lock-key-hole" fill="#38B87`2" [@fillState]="state" fill-rule="nonzero" d="M26.8"></path>
</g>
</g>
</svg>
animations: [
trigger( 'lockState', [
state( 'open', style( {
transform: 'translate3d( 7.83px, 0, 0)',
// transform: 'scale(1)',
} ) ),
state( 'locked', style( {
transform: 'translate3d( 7.83px, 5px, 0)',
} ) ),
transition( 'open => locked', animate( '100ms 500ms linear' ) ),
// transition( 'locked => open', animate( '100ms ease-out' ) ),
] ),
// lock part that turns from green to white
//
trigger( 'fillState', [
state( 'open', style( {
fill: '#38B872',
} ) ),
state( 'locked', style( {
fill: 'red',
} ) ),
transition( 'open => locked', animate( '300ms 900ms linear' ) ),
] ),
.... ]
Expected behavior
The @lockState trigger animates first, closing the lock, then the @fillState animation executes (since it is delayed by 900ms). The lock turns from green into red (normally it would be white colour, just for testing).
Minimal reproduction of the problem with instructions
I will try adding a plunker later.
What is the motivation / use case for changing the behavior?
Well, I had the animation working in Angular 4.4.2. Now that I have migrated to Angular 5.0.5 the animation is working differently. I can try to create separate @triggerStates or play with groups, but I want to make sure that what I am seeing is not a bug.
Environment
Angular version: 5.0.5
Browser:
- [ X ] Chrome (desktop) version 62.0.3202.94
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others: