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修改了

#include "mqtt.h"
...
// Start up
mqtt_broker_handle_t *broker = mqtt_connect(client_name, ip_addr, port);
...
...
// Update broker
mqtt_publish(broker, topic, msg, QoS1);

}

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

1 个答案: