Angular ngAnimate列表项自动淡出

Angular ngAnimate list items automatically fade out

本文关键字：淡出 ngAnimate 列表 Angular      更新时间：2023-09-26

我在一个使用MEAN堆栈的简单应用程序中遇到了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;
}

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

是什么导致这种不希望的淡入淡出效果恢复为不透明度：0？这可能是我使用的获取数据的函数与视图交互的方式吗？

原来它是一个名为".faded"的默认Bootstrap.css类，具有不透明性：0规则；

在我的style.css中重写该类解决了不希望出现的淡出。我希望它能有所帮助。

相关文章：