我正在尝试测试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
变体:
可能会在这里使用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(非常直观的谈话/必看)
我会这样:
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;
}
}