-1

I have a problem with new Angular 4.3 animation. I think that I defined everything OK in accordance with: https://medium.com/@gerard.sans/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8 but I doesn't have any animation at this moment during patch changing. Below I show my animation files:

My animation:

import {trigger, stagger, animate, style, group, query, transition} from '@angular/animations';

export const routerTransition = trigger('routerTransition', [
  transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
]);

If I change this animation into another I see different action, but I never achieve good result (full width page animation and so on). I get also this error if I remove {optional: true} from animation code:

core.es5.js:1020 ERROR Error: Unable to process animations due to the following failed trigger transitions
@routerTransition has failed due to:
- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)
- `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)

EDIT:

I couldn't find a solution so I back to old version of animation in each child controller: 

 animations: [slideInOutAnimation],
  host: { '[@slideInOutAnimation]': '' }

If someone found a solutions pleas post information how we can make it more easy and create animation only in one place instead of each controller.

br.julien
  • 3,420
  • 2
  • 23
  • 44
kris_IV
  • 2,396
  • 21
  • 42

1 Answers1

0

I was the same error in the AOT compilation. My solution:

import {animate, animateChild, group, query as q, sequence, state, style, transition, trigger} from '@angular/animations';

// this solves them problem
export function query(s, a) {
    return q(s, a, {optional: true});
}

export const routerTransition = trigger('routerTransition', [
  transition('* => *', [
    query(':enter, :leave', style({position: 'fixed', width: '100%'})),
    query(':enter', style({transform: 'translateX(100%)'})),
    sequence([
      query(':leave', animateChild()),
      group([
        query(':leave', [
          style({transform: 'translateX(0%)'}),
          animate('400ms cubic-bezier(.75,-0.48,.26,1.52)',
            style({transform: 'translateX(-100%)'}))
        ]),
        query(':enter', [
          style({transform: 'translateX(100%)'}),
          animate('400ms cubic-bezier(.75,-0.48,.26,1.52)',
            style({transform: 'translateX(0%)'}))
        ])
      ]),
      query(':enter', animateChild())
    ])
  ])
]);
well
  • 67
  • 4