gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 18:26:58 24 4
gpt4 key购买 nike

我将 Angular2 与 SystemJs 结合使用。我想知道如何在此 example 中的 Loading 标签上设置一些动画(如淡出效果) .我们可以在应用程序加载之前看到标签。有没有办法在以下内容发生变化时添加淡出效果(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>

Plunker

关于css - 如何在加载时在第一个元素上设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36234211/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com