如何在加载时在第一个元素上设置动画？

Question

我正在使用 Angular2 和 SystemJs。我想知道如何在 example 中的 Loading 标签上设置一些动画（如淡出效果）。我们可以在应用程序加载之前看到标签。有没有办法在以下内容变化时添加淡出效果(index.html):

  <body>
    <my-app>loading...</my-app>
  </body>

Answer 1

最好的方法是在标签中添加一个隐藏的class，并在加载应用程序后删除class。

要使用 css 实现淡入淡出动画，请将此属性添加到标签：

transition: all 0.5s
opacity: 1

然后到class隐藏的

.hidden {
    opacity: 0 !important
}

当您删除隐藏的 class 时，它会将不透明度设置为默认值 1 (100%)。

如果您的应用程序中有 JQuery，可以使用 $('label').fadeOut()。但是现在最好使用 pure CSS

Answer 2

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>

Plunker

如何在加载时在第一个元素上设置动画？

How to set animation on first element on loading?

css

systemjs

angular