如何在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應用程序加載時使加載器淡出？

回答

相關問題