緩慢加載角度UI視圖

Question

加載ui-view有沒有淡入效果？

因爲有時圖像加載速度有點慢。

Answer 1

添加ngAnimate作爲依賴於你的角度應用程序（或閱讀https://docs.angularjs.org/api/ngAnimate）

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
or 
npm install --save angular-animate@X.Y.Z 

作爲依賴添加ngAnimate到您的應用程序是這樣的：

angular 
    .module('app', ['ui.router', 'ngAnimate']) 

添加CSS類的ui-view

<div ui-view class="main"></div> 

動畫與CSS

.main.ng-enter { 
    transition: 0.25s; 
    opacity: 0; 
} 
.main.ng-enter-active { 
    opacity: 1; 
} 
.main.ng-leave { 
    transition: 0.25s; 
    opacity: 1; 
} 
.main.ng-leave-active { 
    opacity: 0; 
} 

See JSFiddle

Answer 2

我只添加一個簡單的CSS類的全局CSS，並將其應用到組件。這不需要ngAnimate。

.myapp-fade-in { 
    /* make things invisible upon start */ 
    opacity: 0; 
    /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */ 
    -webkit-animation: fadeIn ease-in 1; 
    -moz-animation: fadeIn ease-in 1; 
    animation: fadeIn ease-in 1; 

    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration: 0.2s; 
    -moz-animation-duration: 0.2s; 
    animation-duration: 0.2s; 
}