Angular 2 page transition while leaving page

Question

I am trying to do page transition animation using Angular 2. The basic requirement is that the page should there should be animation while entering and leaving the page.The animation works fine while entering the page but while leaving the page to another page,it directly jumps to the new page without executing the leaving animation.

Transition.ts

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

export function optionsTransition() {

    return trigger('optionsTransition', [
        state('void', style({transform: 'translateZ(-500px)'}) ),
       state('*', style({transform: 'translateZ(0)'}) ),
        transition(':enter', [
            // style({transform: 'translateZ(-500px)',opacity:0}),
            animate('0.5s ease-in-out', style({transform: 'translateZ(0px)'}))
        ]),
        transition(':leave', [
          // style({transform: 'translateZ(0px)',opacity:1}),
          animate('0.5s ease-in-out', style({transform: 'translateZ(0px)'}))
        ])
    ]);
}


component.html


<div  style="-webkit-perspective: 1000;">

  <div class="content-container" [@optionsTransition]="customAnimation.state">

    <swiper  overlay-controls [config]="swipperConfig">
      <div *ngFor="let option of Options" class="swiper-slide tile"  fxLayout="column" fxLayoutAlign="center center"
           [routerLink]="[option.nextstate]" routerLinkActive="active" (click)="clickOnOption()">

         <img [src]="option.icon" alt="" style="width:100%; height:100%"/>
        <div class="imageContent"  [ngStyle]="{'background-image': 'url(' +option.icon + ')'}">

        </div>

        <span class="label">{{option.title}}</span>
          <span class="label label1">{{option.info}}</span>

      </div>
    </swiper>

</div>




Component.ts


import { Component, OnInit } from '@angular/core';

import { optionsTransition } from './options-transition.animation';

@Component({
  selector: 'app-options',
    animations: [optionsTransition()],
   // host: {'[@optionsTransition]': ''},
  templateUrl: './options.component.html',
  styleUrls: ['./options.component.css']
})
export class OptionsComponent implements OnInit {
    customAnimation:any = {custom:true, state:""};

  constructor() { }

  ngOnInit() {


  }

    swipperConfig:any = {
        direction:'horizontal',
        scrollbar: '',
        scrollbarHide: false,
        slidesPerView: 'auto',
        centeredSlides: false,
        spaceBetween: 3,
        grabCursor: false
    }

   Options : any[] = []

}

the targeted animation is coming of the page from behind(along z-axis)and displaying it to forefront Am I missing something in the code especially in transition.ts?I am using Angular 2.3.1

Answer 1

I revised at transition.ts

Transition.ts

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

export function optionsTransition() {

return trigger('optionsTransition', [
    state('enter', style({transform: 'translateZ(-500px)'}) ),
    state('leave', style({transform: 'translateZ(0)'}) ),
    transition(':enter', [
        // style({transform: 'translateZ(-500px)',opacity:0}),
        animate('0.5s ease-in-out', style({transform: 'translateZ(0px)', opacity: 1}))
    ]),
    transition(':leave', [
      // style({transform: 'translateZ(0px)',opacity:1}),
      animate('0.5s ease-in-out', style({transform: 'translateZ(-500px)', opacity: 0}))
    ])
]);

}