以一定间隔显示和隐藏角材料工具栏？

Question

我正在尝试测试CSS动画，以显示和隐藏this demo中的棱角材质工具栏。

在应用程序组件内，hide属性的打开时间间隔如下：

  hide:boolean = false
  show() {
    this.hide = !this.hide;
    console.log(`Hide? ${this.hide}`)
  }
  constructor() {
    this.show.bind(this)
    setInterval(this.show, 2000)
  }

CSS在mat-toolbar上这样声明：

<mat-toolbar [ngClass]="hide ? 'hideToolbar' : 'showToolbar'"
             class="hideShowToolbar"><h2>Material Baseline</h2>
</mat-toolbar>

ngClass指令不会在hideToolbar和showToolbar之间切换。有想法吗？

还尝试了Observable变体：

Stackblitz

Answer 1

可能会在这里使用rxjs生命周期挂钩中的interval库ngOnInit，如下所示：

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hide:boolean = false
  secondsCounter = interval(2000);
  show() {
    this.hide = !this.hide;
    console.log(`Hide? ${this.hide}`)
  }

  ngOnInit() {
    this.secondsCounter.subscribe(()=>{
      this.show();
    })
  }
}

工作中DEMO

在以上代码中，我们通过ngOnInit()中可观察到的rxjs订阅了空响应。 Reactivex / Rxjs在以被动方式执行动作时非常有用，它一直是Google角度开发团队吸引社区力量的主要重点之一。

有用的资料可进一步了解rxjs：https://angular.io/guide/rx-libraryhttps://www.youtube.com/watch?v=aYurQaN3RoE（非常直观的谈话/必看）

Answer 2

我会这样：

export class DemoComponent implements OnInit{
  public hidden: boolean;

  ngOnInit() {
    setInterval(() => {
      this.hidden = ! this.hidden;
    }, 2000);
  }
}

在模板中切换hidden类：

<mat-toolbar [class.hidden]="hidden" class="hideShowToolbar">
<h2>Material Baseline</h2>
</mat-toolbar>

这里是一个示例过渡，将从右侧开始为工具栏添加动画效果：

mat-toolbar{
  position: fixed;
  top:10px;
  right: 10px;
  width: 420px;
  transition:right .25s linear;
  &.hidden{
    right: -420px;
  }
}