Question

我尝试使用@ angular / animations模块制作一个简单的动画，以使欢迎文本再次淡入和淡出。淡入效果（：输入过渡）效果很好，但：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>

Answer 1

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

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

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

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

Answer 2

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

在Angular 2+ App中不会触发'：leave'过渡

2 个答案: