Question

是否有fadeIn效果可以加载ui-view？

因为有时图像加载速度有点慢。

Answer 1

将ngAnimate作为依赖项添加到Angular应用程序（或阅读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;
}

角度ui-view加载缓慢

2 个答案: