Menu
I am using Angular2 with SystemJs. I am wondering how can I set some animation (like fade-out effect) on the Loading label in this example. We can see the label before the application loads. Is there a way to add fade out effect when the content of the following changes (index.html):
<body>
<my-app>loading...</my-app>
</body>
985
CSS leaves some room for improvement
@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>
Plunker
111
The best way is add a class hidden to the label, and after load app remove the class.
To achieve the fade animation with css add this properties to the label:
transition: all 0.5s
opacity: 1
And to the class hidden
.hidden {
opacity: 0 !important
}
When you remove the hidden class it will animate opacity to default value that is 1 (100%).
If you have JQuery in your app can use $('label').fadeOut(). But nowadays is better use pure CSS
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With