如何在Angular Dart应用程序加载时使加载器淡出？

我index HTML文件包含以下内容：如何在Angular Dart应用程序加载时使加载器淡出？

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

我想淡出时my-app加载loader-wrapperdiv。

我的初始想法是绑定到my-app镖类中OnInit方法，然后访问DOM的my-app元件外部淡出loader-wrapperdiv。这并不是一个好的解决方案，因为我认为my-app类中的代码只应该在my-app元素内操纵DOM。

my-app元素是否触发了任何类型的事件，我可以通过放置在上述根HTML文件中的JavaScript的snipper绑定到这些事件？

来源

2017-07-30 crossboy007

。 https://stackoverflow.com/questions/36 234211 /如何对设置动画上第一元件上装载/ –

如果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; 
}

式装载机，包装在我的应用程序内空的样式，但是你会喜欢它出现而应用程序加载，并创建一个额外的样式相同的方式（例如，这样的风格标签H2为您的装载机你可以这样做：

my-app:empty + . loader-wrapper h2 { 
    color: #EEE; 
    padding-top: 20px; 
    font-size: 1.5em; 
}

一旦应用程序加载，内容加载到我的应用程序内的div，因此它不再是空的，.loader，包装风格淡出

< my-app ></my-app > 

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

来源

2017-07-30 16:49:41

如何在Angular Dart应用程序加载时使加载器淡出？

回答

相关问题