gpt4 book ai didi

angular - 加载 Angular Dart 应用程序后,如何淡出加载程序?

转载 作者:行者123 更新时间:2023-12-03 03:02:01 24 4
gpt4 key购买 nike

我的 index.html文件包含以下内容:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>

<body>
<div id="loader-wrapper"></div>
<my-app></my-app>
</body>
</html>

我想淡出 loader-wrapper divmy-app已加载。

最初我考虑绑定(bind)到 OnInit my-app 中的方法类,然后访问 my-app 之外的 DOM淡出 loader-wrapper 的元素 div .这感觉不是一个好的解决方案,因为我认为 my-app 中的代码类应该只在 my-app 内操作 DOM元素。
my-app element 触发任何类型的事件,我可以使用上面 index.html 中的 JavaScript 片段绑定(bind)到这些事件文件?

最佳答案

如果 my-app 的内容为空,我使用 css 显示内容,然后在应用加载时将其隐藏。

.loader-wrapper {
opacity: 0;
transition: opacity .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}

my-app:empty + .loader-wrapper {
text-align: center;
padding-top: 15%;
opacity: 1;
z-index: 100;
}

在 my-app 空样式中设置 loader-wrapper 的样式,但是您希望它在应用程序加载时出现,并以相同的方式创建其他样式(例如,为您的 loader 设置一个 h2 标记,您可以这样做:
my-app:empty + . loader-wrapper h2 {
color: #EEE;
padding-top: 20px;
font-size: 1.5em;
}

应用程序加载后,内容将加载到 my-app div 中,因此它不再为空,并且 .loader-wrapper 样式淡出。
 < my-app ></my-app >

<div class="loader-wrapper">
<h2>Loading</h2>
<span class="loginCopyright">&copy; Your Ace from Outer Space</span>
</div>

关于angular - 加载 Angular Dart 应用程序后,如何淡出加载程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45401897/

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