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

例如，如果我刷新頁面，則控制器會從數據庫中獲取items數組，並且列表項會淡入，但是在淡入效果生效后它們會立即淡出。

是什么導致這種不希望的淡入淡出效果回到不透明度：0？ 可能是我使用的獲取數據的功能與視圖交互的方式嗎？

Answer 1

事實證明，這是一個名為'.fade'的默認Bootstrap.css類，它具有opacity：0規則；

在我的style.css中覆蓋該類可以解決不希望的淡出。 希望對您有所幫助。