Собственно простая ситуация. У меня есть глобальный прелоадер, который должен показываться, пока загружается инфраструктуру angular2. Там используется gif. Но в какой-то момент гифка подвисает на секунду и после появляется само приложение. Хотелось бы как-то отловить этот момент и сделать красивое исчезновение элемента.
html:
<body>
<app-root>
<style>
body {
background: #002538;
}
.gif-preloader {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
margin: 0 auto;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
#preloader.fade {
opactity: 0;
}
</style>
<img src="/assets/preloader2.gif" width="66px" height="66px" class="gif-preloader" id="preloader">
</app-root>
</body>
Вот, что я попробовал сделать:
export class MainModule {
constructor() {
document.getElementById("preloader").classList.add("fade");
}
}
Естественно это не заработало. Но так у меня уже нет идей, как такое можно сделать....
Средний
Средний