如何投掷首先进入触发器动画角度6

Question

这是我的动画：

import { Component, NgModule, OnInit } from '@angular/core';
import { Routage } from './routage';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('startCentre', [
state('start', style({
opacity: 0.7,
})
),
state('end', style({
opacity: 1,
})
),
transition('start => end', animate('2000ms ease-in')),
])
]
})
export class AppComponent implements OnInit {

anim :any= true; //à true on commence avec une opacité faible
get quelEtatCentre() {
console.log("etat /// :", this.anim);
return this.anim ? 'start' : 'end';
}
ngOnInit() {
}
bascule() {
this.anim = !this.anim;
}

模板：

<app-centre [@startCentre]="quelEtatCentre" (click)="bascule()"></app-centre>

当我单击"应用程序中心"时，不透明度从 0.7 到 1 开始。 现在，我希望当新访问者到达页面时，我想自动启动它。

我试试这个：

ngOnInit() {
this.bascule();//would like opacity 0.7 wait  2 seconde for 1 
}

当我进入或引用页面时，我的"应用程序中心"不是等待 0.7 => 1 不透明度，不透明度现在是 1。 我必须如何做 通话 没有点击 en 新 进入页面？

演示

Answer 1

一个非常快速和简单的解决方法是放置一个 setTimeout：

ngOnInit() {
setTimeout(() =>
this.bascule(), 1200);
}

演示

Answer 2

这是一个示例

https://stackblitz.com/edit/angular-b8uale?file=src%2Fapp%2Fapp.component.html

手动不透明度： 访客点击手动=>点击按钮=>消息不透明度将0.7到1 CSS

访问者进入 à 新页面，我希望消息是 opacité 0.7 ，2 秒后将不透明 CSS 将 1。