Angular 以角度显示动画，隐藏/显示特定div，持续x秒

我有一个有棱角的页面，它的设计是这样的

<div id="counterdisplay">
    <div class="counter">
        <p>Counter  </p>
        <p class="value">
            <span *ngIf="dataSource.counter != ''" >
                    {{ dataSource.counter }}
            </span>
            <span *ngIf="dataSource.counter == ''" >
                    -----
            </span>
        </p>
    </div>
    <div class="token">
        <p>Now Serving  </p>
        <p class="value">
            <span *ngIf="dataSource.token != ''">{{ dataSource.token }}</span>
            <span *ngIf="dataSource.token == ''">-----</span>
        </p>
    </div>

  </div>

1022值来自在组件中处理的套接字事件，它在一段时间后不断变化

我需要的是，当我得到任何新值时，我会更新它，但在更新后，它应该像flash in out一样，隐藏/显示x秒。 我可以使用css做这样的事情，但这种情况只发生一次，我在每次更新时都需要它，也不想在其中使用jQuery。纯角度，css，材料设计

简言之，我需要一个组件中的函数，它将获得参数秒，并且 当被调用时，它将使令牌div隐藏/显示，为 那几秒钟过去了

我的组件是

export class CounterdisplayComponent implements OnInit {

  cdID = '';
  dataSource: Tokens = {token: '', counter: '', finish: false};
  constructor(
    private socketService: CounterSocketService,
    private route: ActivatedRoute
  ) {
    const params = this.route.snapshot.params;
    this.cdID = params.id;

  }

  ngOnInit() {
    this.connectSockets();
  }

  connectSockets(): void {
    const THIS = this;
    this.socketService.initSocket( this.cdID );

    this.socketService.onMessage()
    .subscribe((message: Tokens) => {
      console.log('update ', message);
      if ( !message.finish ) {
        console.log('Got data => ', message);
        this.dataSource = message;
      } else {
        // THIS.removeToken( message );
      }
    });

  }

  removeToken( tokenObj ): void {
    this.dataSource = {token: '', counter: '', finish: false};
  }

}

onMessage订阅者不断回调数据， 我的html文件非常简单，就像这样

<div id="counterdisplay">
    <div class="counter">
        <p>Counter  </p>
        <p class="value">
            <span *ngIf="dataSource.counter != ''" >
                    {{ dataSource.counter }}
            </span>
            <span *ngIf="dataSource.counter == ''" >
                    -----
            </span>
        </p>
    </div>
    <div class="token">
        <p>Now Serving  </p>
        <p class="value">
            <span *ngIf="dataSource.token != ''">{{ dataSource.token }}</span>
            <span *ngIf="dataSource.token == ''">-----</span>
        </p>
    </div>

  </div>

组成部分：

HTML:

---

试试这个，希望它能对你有用。

请添加代码snippen你做了什么？我已经用代码更新了问题，请现在检查。使用这个，我只能隐藏/显示，它不会添加任何动画，如缓慢隐藏和缓慢显示等

<div [@esvanecerDesvanecer]="'in'">

setInterval(() => {
  // write pure JavaScript here that will work
 }, 2000);