时间戳

首页 > 解决方案 > ':leave' 转换在 Angular 2+ 应用程序中不会触发

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

问题描述

我尝试使用@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>

标签： angularanimationtransition

解决方案

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

推荐阅读