Question

我是email的新手，现在我遇到了一些事情。我有一个简单的列表，当你选择一个项目时它显示一个子列表，两个列表都有相同的动画，但如果在第一个列表中选择一个不同的项目，则第二个列表不会再次动画。我已经尝试将第二个列表分配给@angular/animations，然后给出新值，认为这足以让动画再次触发。

我使用的解决方法是null在分配新值之前等待100毫秒，它工作正常，但屏幕闪烁，这是我的代码：

MY COMPONENT.HTML：

setTimeout

MY COMPONENT.TS：

<ion-list>
    <!-- FIRST LIST -->
    <ion-item-group>
      <ion-item-divider color="light">By Animal</ion-item-divider>
      <ion-item [@listAnimation]="services.length" class="scrollable-x">
        <ion-avatar *ngFor="let serv of services" item-start (tap)="setSelectedType(serv)">
          <img src="/path/to/image.png">
          <p>{{serv.type}}</p>
        </ion-avatar>
      </ion-item>
    </ion-item-group>

    <!-- SECOND LIST: DYNAMIC LIST -->
    <ion-item-group *ngIf="selectedType">
      <ion-item-divider color="light">Services: {{selectedType}}</ion-item-divider>
      <ion-item [@listAnimation]="selectedTypeServices.length" class="scrollable-x">
        <ion-avatar *ngFor="let serv of selectedTypeServices" item-start>
          <img src="/path/to/image.png">
          <p>{{serv.name}}</p>
        </ion-avatar>
      </ion-item>
    </ion-item-group>
  </ion-list>

那么有没有办法重新初始化或重新触发动画？也许我错过了一些选项，除import { IonicPage, NavController, NavParams } from "ionic-angular"; import { trigger, style, transition, animate, keyframes, query, stagger } from "@angular/animations"; @IonicPage() @Component({ selector: "page-agendar", templateUrl: "agendar.html", animations: [ trigger("listAnimation", [ transition("* => *", [ query(":enter", style({ opacity: 0 }), { optional: true }), query( ":enter", stagger("300ms", [ animate( ".7s ease-in", keyframes([ style({ opacity: 0, transform: "translateX(-75%)", offset: 0 }), style({ opacity: 0.5, transform: "translateX(25px)", offset: 0.3 }), style({ opacity: 1, transform: "translateY(0)", offset: 1.0 }) ]) ) ]), { optional: true } ) ]) ]) ] }) export class AgendarPage { public services: Array<{ type: string; services: Array<{ name: string }>}> = []; public selectedType: string; public selectedTypeServices: any[]; constructor(){} setSelectedType = service => { this.selectedType = null; setTimeout(() => { this.selectedTypeServices = service.services; this.selectedType = service.type; }, 100); }; }之外的其他功能或类似的东西？

Answer 1

我认为你的动画不是“重新触发”的主要原因是由于你的角度动画的状态配置。有两种处理角度动画的方法：

1。）状态方法

trigger('cube', [
  state('front', style({
    transform: 'rotateX(0deg)',
  })))

2。）转换方法

trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style({transform: 'translateY(-100%)', opacity: 0}),
      animate('500ms', style({transform: 'translateY(0)', 'opacity': 1}))
    ]
  ))

你似乎在混淆两者，而这就是我相信你的问题所在。

如果您对html使用状态方法，请说出以下内容：

<强> HTML

<div [@cube]="state">

<强>打字稿

trigger('cube', [
  // States that can occur from viewing the front panel
  state('front', style({
    transform: 'rotateX(0deg)',
  })),
  state('bottom', style({
    transform: 'rotateX(90deg) translateY(-50vh) translateZ(50vh)',
  }))
  // Front animations when landing on page
  transition('front => bottom', animate('1500ms ease-in-out')),
  transition('bottom => front', animate('1500ms ease-in-out'))
])

您可以将ngOnInit（）的状态初始化为例如底部或前部，然后打开单击或类似的东西。请注意，动画发生的原因是元素正在改变“状态”，而变量正在指示更改。

如果您选择转换方法，您可能会遇到以下情况：

<强> HTML

<div *ngIf="hasUpload=='yes'" [@myAnimation]>

<强>打字稿

trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style({transform: 'translateY(-100%)', opacity: 0}),
      animate('500ms', style({transform: 'translateY(0)', 'opacity': 1}))
    ]
  ),
  transition(
    ':leave', [
      style({transform: 'translateY(0)', 'opacity': 1}),
      animate('500ms', style({transform: 'translateY(-100%)', 'opacity': 0})),
    ]
  )]
)

请注意，这里的区别在于动画是根据元素是否显示而发生的。因此，ngIf语句中的变量决定了动画是否会发生。

当你使用[@listAnimation]="services.length"时，就我所知，services.length是无用的，因为你使用的是转换方法而不是状态。我相信您可以通过使用状态方法完成您想要做的事情，并根据列表中的服务更改状态。然后切换状态，动画应该发生。你基本上已经做了超时，这就是为什么它在某种程度上起作用的原因。因此，不是使用你的超时，而是通过三元操作来翻转状态，你应该好好去。希望能消除一些含糊之处！祝你好运！：d

如何使用动画系统重新初始化/重新触发动画？

1 个答案: