离开页面时的Angular 2页面转换

Question

我正在尝试使用 Angular 2 进行页面过渡动画。基本要求是页面在进入和离开页面时应该有动画。进入页面时动画效果很好，但离开页面到另一个页面时效果很好,不执行离开动画直接跳转到新页面。

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[] = []

}

目标动画从后面（沿 z 轴）进入页面并将其显示到最前面 我是否遗漏了代码中的某些内容，尤其是在 transition.ts 中？我使用的是 Angular 2.3.1

Answer 1

我在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}))
    ])
]);

}