角度动画：实现“ flyOut”动画

编程问答 2022-08-14

问题描述

在我的角度应用程序中，我制作了这个动画：

const flyIn = trigger('flyIn',[
  //enterTransition,state("in",style({ transform: "translateY(0)" })),transition(':enter',[
    style({ transform: "translateY(100%)" }),animate(1000)
  ]),transition(":enter",[
    animate(100,style({ transform: "translateX(100%)" }))
  ])
]);

并在模板中这样称呼它

  <div id="resultInscriptionMessageZone" *ngIf="show" @flyIn @flyOut>

此动画包括使div在平移时从赃物显示到顶部

现在，我想实现反向动画以消除动作；所以这将是:leave动作；但从上到下直到最后消失

应该是这样的：

const flyOut = trigger('flyOut',[
  state("out",style({ transform: "....." })),transition(':leave',[
    style({ transform: "......" }),transition(":leave",[

  ])
]);

但是我仍然无法使其正常工作； 建议？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-animationstypescripttypescripttypescript