uksz uksz - 1 year ago 59
CSS Question

How to set animation on first element on loading?

I am using Angular2 with SystemJs. I am wondering how can I set some animation (like fade-out effect) on the

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):


Answer Source

CSS leaves some room for improvement

  selector: 'my-app',

  template: `
  directives: [ROUTER_DIRECTIVES],
  host: { 
    '[class.loaded]': 'isLoaded',
  {path: '/',   name: 'Main View',     component: MainViewComponent}
export class AppComponent { 
  isLoaded:boolean = false;

  ngAfterViewInit() {
    setTimeout(() => this.isLoaded = true, 0);
  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;

  <div class="spinner">loading...</div>