角度动画，隐藏/显示特定 div x 秒数答案

【问题标题】：animation in angular, hide/show specific div for x number of seconds角度动画，隐藏/显示特定 div x 秒数
【发布时间】：2019-12-27 18:14:46
【问题描述】：

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

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

我需要的是，当我得到任何新值时，我会更新它，但更新后它应该像闪入一样，隐藏/显示 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>

【问题讨论】：

请您添加代码片段您到目前为止所做的事情
我已经用代码更新了问题，请立即检查。

标签： angular angular-material material-design css-animations angular8

【解决方案1】：

组件：

import { trigger, state, style, transition, animate } from '@angular/animations';

...

@Component({
  selector: 'componente',
  templateUrl: './componente.html',
  styleUrls: ['./componente.css'],
  animations: [
    trigger('esvanecerDesvanecer', [
      state('in', style({ opacity: 1 })),

      transition(':enter', [
        style({ opacity: 0 }),
        animate(400)
      ]),

      transition(':leave',
        animate(200, style({ opacity: 0 })))
    ])      
  ]
})

HTML：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

使用这个，我只能隐藏/显示，它不会添加任何动画，如慢慢隐藏和慢慢显示等