onloadのanglejsの後にCSSアニメーションが機能しない

Question

ページがロードされている間に表示されるdivを作成します。コードは次のとおりです：

divは、ほとんどのページが読み込まれた後に非表示になります。一部の非同期のものだけが表示されます。

しかし、div要素を非表示にしているとき、私は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-bold: "flexomedium"; 
    font-size: 60px; 
    color: #C9620D; 
} 

このアニメーションは、ページのロード後に動作しませんが、私は角度を使用して可視性を変更した場合、それは動作しますイベント：ng-clikのように：

<button ng-click="load =!load">Load</button> 

ページが読み込まれてもアニメーションが表示されないのはなぜですか？

Answer 1

アノテーションのクラスをng-classを使用して追加します。

https://docs.angularjs.org/api/ng/directive/ngClass