Question

我的路线之间有一个很好的动画，我在每个组件上添加了一个扭曲，只有在加载数据后才显示组件，它看起来像这样：

我的组件HTML文件：

<div *ngIf="isDataAvailable">
   ...my component html template...
</div>

这是我的ts文件：

isDataAvailable:boolean = false;
ngOnInit() {
    this.subscription = this.clientsService.getClients().subscribe(
      (result:any) => {
        this.data = result.clients;
        this.isDataAvailable = true;
      }
    );
}

在我的root ts文件中我有这个动画设置：

import { customTransition } from './custom-transition.animation';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html',
  styleUrls: [
    './master.component.css',
  ],
  animations: [customTransition()],
  encapsulation: ViewEncapsulation.None
})

这是我的根文件的HTML模板

<ng2-page-transition [animation]="customAnimation">
    <div [@ng2ElementState]="customAnimation.state">
        <router-outlet></router-outlet>
    </div>
</ng2-page-transition>

我现在的问题是，有些组件加载速度很快，而且有些组件加载速度很慢，因为它们有数据而这很好但是那些加载缓慢的用户看不到动画而只是组件是在准备就绪时显示。

我想在数据加载后启动动画甚至可以在组件准备好之前为用户显示一些预加载器。

谢谢你！

编辑：

这是我的customTransition.animation.ts文件：

//custom-transition.animation.ts
import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core';

export function customTransition():AnimationEntryMetadata {
  return slideOutAndIn();
}

function slideOutAndIn():AnimationEntryMetadata {
  return trigger('ng2ElementState', [
    state('leave', style({
        position:'inherit', 
        display:'block',
        width:'100%'
    })),
    state('enter', style({
        position:'inherit', 
        display:'block',
        width:'100%'
    })),
    transition('* => enter', [
        style({
            transform: 'translateY(10%)',
            opacity: 0
        }),
        animate('0.5s ease-in-out', style({
            transform: 'translateY(0%)',
            opacity: 1
        }))
    ]),
    transition('* => leave', [
      style({
        transform: 'translateY(0%)',
        opacity: 0
      }),
      animate('0.5s ease-in-out', style({
        transform: 'translateY(-10%)',
        opacity: 0
      }))
    ]),
  ]);
}

Answer 1

动画应该在组件内，而不是在根文件中，所以这是我的结果：

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

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css'],
  animations: [trigger('slideIn', [
    state('inactive', style({
        transform: 'translateY(10%)',
            opacity: 0
    })),
    state('active', style({
        transform: 'translateY(0%)',
            opacity: 1
    })),
    transition('active => inactive', animate('.6s ease')),
    transition('inactive => active', animate('.6s ease'))]
  ]
})

export class ClientsComponent implements OnInit,OnDestroy {
  state:string = "inactive";

  constructor( private clientsService: ClientsService) {}

  ngOnInit() {
    this.updateData();
  }

  updateData(){
    this.subscription = this.clientsService.getClients().subscribe(
      (result:any) => {
        this.data = result.clients;
        this.state = "active";
      }
    );
  }
}

如何在从服务加载组件的数据之后在路由器之间启动动画

1 个答案: