Angular2：离开过渡不起作用答案

【问题标题】：Angular2 :leave transition is not workingAngular2：离开过渡不起作用
【发布时间】：2018-04-05 05:10:19
【问题描述】：

在使用 angular2 动画单击带有动画的按钮后，我试图隐藏 ionic2 项目。

所以在仔细阅读了 angular2 动画文档后，我得出结论： :leave = *=>void 和 :enter = void => *。所以对我来说，:enter 运行良好，但 :leave 不行。

这是我的代码：

trigger('show', [
  state('void', style({
    opacity:0
  })),
  state('*', style({
    opacity:1
  })),
  transition(':enter', animate('700ms ease-in')),
  transition(':leave', animate('700ms ease-in'))
]),

我可以替换为：

 transition('*<=>void', animate('700ms ease-in'))

但我使用当前的进行调试。

<ion-row align-items-center (click)="hide()">
      <ion-col *ngIf="isShown" [@show]>
        <img class="applictant" src="assets/icon/applicants-avatar.png">
        <h2>Applicant</h2>
      </ion-col>
</ion-row> 

  hide() {
    this.isShown === false ? this.isShown = true : this.isShown = false;
}

那么:leave 的问题是什么@ 不起作用，我该如何解决。

谢谢。

【问题讨论】：

我试过你的动画，效果很好。你能创建一个小的 StackBlitz 例子来看看你是否还有问题吗？
@br.julien，当然是的，但我有一些事情应该做，我不能为这个问题创建一个答案。

标签： css angular animation ionic2 angular-animations

【解决方案1】：

你可以试试这个吗？

trigger('show', [
            transition(':enter', [style({opacity: '0'}), animate('700ms ease-in', style({opacity: '1'}))]),
            transition(':leave', [style({opacity: '1'}), animate('700ms ease-in', style({opacity: '0'}))])
        ]),

【讨论】：

还有一个建议是：也许你有一些使用这个动画的元素的样式，这些样式可能会阻止当前的动画样式。尝试用数字 700 替换 '700ms ease-in' 字符串
我认为问题出在嵌套动画