How to set animation on first element on loading?

2019-01-26 21:35发布

站内问答 / HTML/CSS
399 2 5

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>

2条回答
地球回转人心会变
2楼-- · 2019-01-26 21:52

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

查看更多
0人赞 添加讨论(0) 举报
劫难
3楼-- · 2019-01-26 21:58

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)