CSS動畫不工作後的onload angularjs

Question

我創建一個div是節目的同時，加載頁面。該代碼是：

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

的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添加您的類anomation。

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