':leave' 转换在 Angular 2+ 应用程序中不会触发答案

【问题标题】：':leave' transition does not fire in Angular 2+ App':leave' 转换在 Angular 2+ 应用程序中不会触发
【发布时间】：2019-07-12 01:00:53
【问题描述】：

我尝试了一个简单的动画，使用 @angular/animations 模块让欢迎文本再次淡入淡出。淡入效果（:enter 过渡）工作得很好，但 :leave 过渡不会触发。我不明白为什么它不起作用。请帮忙:)

我尝试了两种定义转换的方法（':leave' 或 '* => void'），但没有任何效果。

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css'],
  animations: [
    trigger('fade', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(4000, style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate(4000, style({ opacity: 0 }))
      ])
    ]),
    ]
})
export class WelcomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

欢迎文本应该在几秒钟后淡入并在几秒钟后再次淡出。淡入作品，不淡出。

模板：

<div class="container-fluid">
  <div class="row justify-content-center">

              <span class="font-weight-bold" @fade style="font-size:6vw;"> W E L C O M E !</span>

      </div>

【问题讨论】：

标签： angular animation transition

【解决方案1】：

您需要定义过渡的开始和结束样式。

  transition(':leave', [
    style({ opacity: 1 }),
    animate(4000, style({ opacity: 0 }))
  ])

如果您希望初始样式的值是动态的，则使用* 值。

  transition(':leave', [
    style({ opacity: '*' }),
    animate(4000, style({ opacity: 0 }))
  ])

【讨论】：

感谢您的帮助。不幸的是，它并没有改变任何东西。也许模板有问题？

【解决方案2】：

当元素被隐藏时，:leave 将被触发。示例堆栈闪电战：https://stackblitz.com/edit/angular-bxt5w9

【讨论】：

谢谢，但我希望它在不涉及任何事件的情况下自动出现和消失。我该怎么做？
您可以在单个过渡中添加多个animate，查看更新的示例。
非常感谢。这很有帮助！最后一个问题：如果我希望欢迎在它消失后被完全自动删除（我不希望它像现在一样在动画之后再次显示）我该怎么做？
你需要做的是：当元素显示时动画:entertransition。此动画完成后，隐藏元素（触发:leave 动画）。也更新了 stackblitz