Javascript 角度ng类中的css过渡淡入淡出

我试图模拟刷新我的列表。因此，当用户单击“刷新”时，该列表会淡入，让用户知道发出了新的GET请求

html

当然还有js

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.friends = ['andy', 'randy', 'bambi'] ;

};

这是一个正在工作的plnkr：

---

我的问题是我的方式，用户必须单击两次才能在单击一次后淡入列表，因为变量刷新必须在设置为true之前设置为false。有没有通过纯css实现这一点？我曾尝试在控制器中设置范围变量并调用click函数，但现在我感到困惑。我对任何解决方案都持开放态度

我使用了@PLS timeout的思想，但保留了ng类，并添加了一个变量来检查它是开还是关。然后在等待超时之前单击时始终将其设置为false

  $scope.friends = [{name:'andy'}, {name:'randy'}, {name:'bambi'}] ;
    $scope.refresh = function(){
        $scope.fadeCheck = true;
        $timeout(function(){
            $scope.fadeCheck = false;
        }, 300);
    }

还有html

<ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: fadeCheck === false}">
  <li>{{friend.name}}</li>
</ul>

{{friend.name}

首先，我想看看，因为它有所有这些类型的css动画。如果不是的话，您应该钩住模块，因为它提供了一种使用ng hide/ng show处理此类内容的好方法。所以你的css变成了

.fadeIn { 
    opacity: 0;
}
.fadeIn.ng-hide-remove {
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn;
}

你的html变成了

<ul ng-repeat="friend in friends" class="animated" ng-show="refresh">
   <li>{{friend}}</li>
</ul>

{{朋友}

---

您可能还希望提供淡出动画，并使用css规则

.fadeIn.ng hide

应用它。您只需将其显示为数据刷新的指示器即可。您不需要所有这些标志，只需将其转换为对象数组即可。使用对象数组时，每次项目都是新项目（因为hashKey中的差异），动画都会出现。有关添加项目的更高级动画，您可以查看ng repeat animation classes/Thank@PSL这很好，但我有一个更嵌套和复杂的对象，我不能简单地将它们全部投射到一个数组中。我最终使用了您的超时思想，但添加了一个变量来检查淡入淡出是否为真，然后在超时时设置为false，并在ng类中使用它。我的答案有一个plnkr。可能是

.fadeIn { 
    opacity: 0;
}
.fadeIn.ng-hide-remove {
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn;
}

<ul ng-repeat="friend in friends" class="animated" ng-show="refresh">
   <li>{{friend}}</li>
</ul>