angular ng-class中的css过渡淡入淡出答案

【问题标题】：css transition fade in angular ng-classangular ng-class中的css过渡淡入淡出
【发布时间】：2014-10-20 22:09:59
【问题描述】：

我正在尝试模拟我拥有的列表的刷新。因此，当用户单击刷新时，列表会淡入以让用户知道发出了新的 GET 请求。

html

<div ng-controller="ModalDemoCtrl">

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

<button ng-click="refresh=!refresh"> Fade me in every time </button>

</div>

css

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}

当然还有js

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

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

};

这是一个有效的 plnkr：http://plnkr.co/edit/R0Gv2T?p=info

我的问题是我拥有它的方式，用户必须单击两次才能在单击一次后淡入列表，因为变量 refresh 必须在设置回 true 之前设置回 false。有没有任何地方可以通过纯 css 来实现这一点？我已经尝试在控制器中设置范围变量并调用 click 函数，但此时我很困惑。我愿意接受任何解决方案

【问题讨论】：

您只需将其显示为数据刷新权的指示器即可。您不需要所有这些标志，只需将其转换为对象数组即可。 plnkr.co/edit/RYBVUp?p=preview 使用对象数组会发生什么（你没有跟踪）每次项目将是新项目（因为 hashKey 的不同），动画就会发生。有关添加项目的更高级动画，您可以查看 ng-repeat 动画类/
谢谢@PSL 这工作得很好，但我有一个更嵌套和复杂的对象，我不能简单地将它们全部转换成一个数组。我最终使用了你的超时想法，但添加了一个变量来检查淡入淡出是否为真，然后在超时时设置为假，并将其放在 ng-class 中。我的答案有一个 plnkr。
How to fade out element using ng-hide with AngularJS?的可能重复

标签： javascript html css angularjs transitions

【解决方案1】：

首先，我会查看angular-motion，因为它具有所有这些类型的 css 动画。如果不是，你应该加入 ngAnimate 模块，因为它提供了一种使用 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 应用它

【讨论】：

【解决方案2】：

我使用了@PLS 超时的想法，但保留了 ng-class 并添加了一个变量来检查它是打开还是关闭。然后在等待超时之前单击时始终将其设置为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>

http://plnkr.co/edit/Xp7E6s?p=preview

【讨论】：