@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations:[trigger('square',
[
state('green',style(
{
'background-color':'green',
'height':'100px',
transform:'translateY(-100%)'
}
)),
state('red',style(
{
'background-color':'red',
'height':'50px',
transform:'translateY(100%)'
}
)),
transition('green => red', [animate('900ms ease-in')]),
transition('red => green',[animate('800ms ease-out')]),
]
)]
})
export class AppComponent {
@Input() squareState: string;
darkTheme = false;
switchTheme(dark) {
this.darkTheme = dark;
console.log("dark: %s", dark);
this.oc.getContainerElement().classList.add(dark ? 'myapp-dark-theme' : null);
}
constructor(private oc: OverlayContainer){}
onClick(){
this.squareState = this.squareState === 'red' ? 'green' : 'red';
}
}
实在是找不到原因了
全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用
了解课程