Angular ngAnimate 列表项自动淡出

Question

在我使用 MEAN Stack 做的一个简单应用程序中，我遇到了一个奇怪的 ngAnimate 问题。

angular.js 和 angular-animate.js 都是 1.4.7 版本。

我有一个 ul，看起来像这样：

<ul>
   <li ng-repeat="item in items" class="fade">
      {{item.name}}
   </li>
</ul>

在控制器中，我通过对 MongoDB 的 $http.get() 调用获取 items 数组。

这是简单动画的 CSS 代码：

.fade {
  transition: 1s linear all;
  -webkit-transition: 1s linear all;
}

.fade.ng-enter {
  opacity: 0;
}

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

如果例如我刷新页面，控制器从数据库中获取项目数组，列表项淡入，但它们在淡入效果后立即淡出。

是什么导致这种不受欢迎的淡入淡出效果变回 opacity:0 ？这可能是我使用获取数据的函数与视图交互的方式吗？

Answer 1

原来它是一个名为“.fade”的默认 Bootstrap.css 类，它有 opacity:0 规则；

在我的 style.css 中覆盖该类解决了不希望的淡出问题。希望对你有帮助。