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>

当我点击“app-center”时，不透明度从0.7开始为1。现在我希望当新访客到达页面时，我想自动启动它。

我试试这个：

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

当我输入或改编页面时，我的“app-center”不等待0.7 =＆gt; 1不透明度，不透明度现在为1。没有点击新的进入页面，我必须怎么做电话？

Demo

Answer 1

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

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

Demo

Answer 2

这是一个例子

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

手动不透明度：访问者点击manual =＆gt;点击按钮=＆gt;消息不透明度为0.7至1 css

访问者进入新页面，我希望消息是opacité0.7，并且2 seconde wille opacity css将为1。

如何抛出首先输入触发器animate angular6

2 个答案: