我正在使用Angular2和SystemJs.我想知道如何在此
example中的加载标签上设置一些动画(如淡出效果).我们可以在应用程序加载之前看到标签.当以下内容发生变化(index.html)时,有没有办法添加淡出效果：
<body>
<my-app>loading...</my-app>
</body>
解决方法
CSS留有一些改进空间
@Component({
selector: 'my-app',template: `
<router-outlet></router-outlet>
`,directives: [ROUTER_DIRECTIVES],host: {
'[class.loaded]': 'isLoaded',},})
@RouteConfig([
{path: '/',name: 'Main View',component: MainViewComponent}
])
export class AppComponent {
isLoaded:boolean = false;
constructor(){}
ngAfterViewInit() {
setTimeout(() => this.isLoaded = true,0);
}
}
<style>
my-app {
visibility: hidden;
opacity: 0;
}
my-app.loaded {
visibility: visible;
opacity: 1;
transition: visibility 0s 2s,opacity 2s linear;
}
div.spinner {
position: absolute;
top: 150px;
left: 150px;
}
my-app.loaded + div.spinner {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s,opacity 2s linear;
background-color: red;
}
</style>
<body>
<my-app></my-app>
<div class="spinner">loading...</div>
</body>
