When loading a page, I have created a div that is displayed. Here is the code:
<div ng-show="load" class="rb-animate-time rb-animate-hide rb-load">
<div class="text">Hello world</div>
</div>
<div ng-init="load = false"></div>
This div is hidden after most of the page has loaded, with only some asynchronous content still loading.
I attempted to add an animation for when the div is hidden using the following CSS:
.rb-load {
background-color: #A1B1B6;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: contain;
display: table;
z-index: 50000;
transition: all linear 0.5s;
opacity: 1;
}
.rb-load.ng-hide {
opacity: 0;
transition: all linear 0.5s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.rb-load .text {
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 60px;
color: #C9620D;
}
The animation does not work once the page has fully loaded, however, it does work if I change the visibility using an Angular event, like a click:
<button ng-click="load =!load">Load</button>
Why does the animation fail to occur when the page loads?