Angular 4 animation does left, right, top, bottom correctly but does not work for transforms (translateX,translateY,translateZ)

Question

I am trying to animate router transitions using angular 4.1.2 using the pseudo :enter, :leave state change expressions using 3D CSS expressions.

Read the angular.io docs on this which describe void => * and * => void for :enter and :leave pseudo transitions.

After trying the slide in out transformation from this post, I could eventually get it to work by setting :host {postion:relative} in my component css files(should prob let the author know).

This worked:

trigger('routerAnimation', [
    transition(':enter', [
        style({ right: '-400%' }),
        animate('.2s ease-in-out', style({ right: 0 }))
    ]),

    transition(':leave', [
        animate('.2s ease-in-out', style({ right: '-400%' }))
    ])
]);

This did not:

trigger('routerAnimation', [
    transition(':enter', [
        style({ transform: 'translateZ(-400px)' }),
        animate('.2s ease-in-out', style({ transform: 'translateZ(0)' }))
    ]),

    transition(':leave', [
        style({ transform: 'translateZ(0)' }),
        animate('.2s ease-in-out', style({ transform: 'translateZ(-400px)' }))
    ])
]);

I am really confused as to why this is happening, I also tried setting my :host positioning from relative to absolute just to be sure I am not making a CSS mistake.

Any help would be super duper mega awesome :)

Answer 1

I think you forgot to add transform: perspective(XXXpx);
That's why you just can't see translateZ effect.
I tried to use such animation:

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';

// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        transform: 'perspective(500px) translateZ(0px)',
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        transform: 'perspective(500px) translateZ(-400px)',
      }),
      animate('10s ease')
    ]),
    transition(':leave', [
      animate('10s ease', style({
        opacity: 0,
        transform: 'perspective(500px) translateZ(-400px)',
      }))
    ])
  ]);

And it works just fine.
Check this to find more about translateZ:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

If your components are bigger than screen you will not see animation or you need to scroll the page to find it. So in most cases you need to add position:absolute to the component CSS (for :host selector). Or you can add such decorated properties:

@HostBinding('@routeAnimation') public routeAnimation = true;
@HostBinding('style.display')   display = 'block';
@HostBinding('style.position')  position = 'absolute';

Don't forget to add:

import {HostBinding} from '@angular/core';