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?

Answer 1

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

1. Removed the nested groups (you have groups in groups that define single animations)
2. 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.
3. 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%)' }))
  )
])