Angular Router animation timing errors

Question

I have recently updated my Angular app to 4.0 in order to take advantage of the animation between routes.

Below is my animation function:

export function routerTransition() {
    return trigger('routerAnimations', [
        transition('home => development, design => home', [
            query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
            query(':leave', style({ zIndex: 100 })),
            query(':enter', style({ transform: 'translateX(100%)', opacity:1 })),
            group([
                query(':leave', group([
                    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(-100%)', opacity:0 }))
                ])),
                query(':enter', group([
                    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(0%)' }))
                ]))
            ])
        ]),
        transition('home => design, development => home', [
            query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
            query(':leave', style({ zIndex: 100 })),
            query(':enter', style({ transform: 'translateX(-100%)', opacity:1 })),
            group([
                query(':leave', group([
                    animate('0.8s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(100%)', opacity:0 }))
                ])),
                query(':enter', group([
                    animate('0.8s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(0%)' }))
                ]))
            ])
        ])
    ])
}

For some reason when I change the timing of one transition to be the same as the other (i.e. change "0.7s" to "0.8s") I get the following error:

The CSS property "transform" that exists between the times of "0ms" and "800ms" is also being animated in a parallel animation between the times of "0ms" and "800ms"

The two animations shouldn't overlap as the stateChangeExpr is different for each transition.

What am I missing?

score 0 · Answer 1 · answered Jun 15 '17 at 22:56

0

I have the same problem, that seems to be a bug. Reordering the transitions fixed it for me.

answered Jun 15 '17 at 22:56

user2957238

121
5

SpaceFozzy · Accepted Answer · 2017-06-16T13:45:31.020

I was actually able to get your animations to work. To fix them, I:

Removed the nested groups (you have groups in groups that define single animations)
I explicitly defined an initial state for every property you were animating. If you animated translateX, I set the starting value at the top of the animation for that element.
Looks like your initial opacity values were set on the wrong elements (i.e. you initiate it as 1 on :enter, then animate to 0 on :leave.

Here are the revised transitions that work for me:

First:

query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ transform: 'translateX(0%)', opacity:1 })),
query(':enter', style({ transform: 'translateX(100%)' })),

group([
  query(':leave',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(-100%)', opacity:0 }))
  ),
  query(':enter',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(0%)' }))
  )
])

Second:

query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ transform: 'translateX(0%)', opacity:1 })),
query(':enter', style({ transform: 'translateX(-100%)' })),

group([
  query(':leave',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(100%)', opacity:0 }))
  ),
  query(':enter',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(0%)' }))
  )
])

Angular Router animation timing errors

2 Answers2