Angular Router Animation Sync Errors

Question

I recently upgraded my Angular app to 4.0 to use animations 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 time of one transition to the same as the other (that is, changing "0.7 s" to "0.8 s"), 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 should not intersect, because each transition stateChangeExpris different.

What am I missing?

Answer 1

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

• ( , )
• , . translateX, .
• , (.. 1 :enter, 0 :leave.

, :

-:

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%)' }))
  )
])

-:

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%)' }))
  )
])

Answer 2

, . .