css transition fade in angular ng-class

Question

I'm trying to mock a refresh for a list that I have. So when a user clicks refresh, the list fades in to let users know a new GET request was made.

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

and of course the js

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

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

};

Here's a working plnkr: http://plnkr.co/edit/R0Gv2T?p=info

My issue is the way I have it, the user has to click twice to fade in the list in after clicking it once because the variable refresh has to be set back to false before being set back to true. Is there anywhere through pure css to accomplish this? I've tried setting scope variables in the controller and calling on click function but I'm just confused at this point. I'm open to any solution

Answer 1

For one, I'd check out angular-motion as it has all of these kinds of css animations. If not though you should hook into the ngAnimate module as it provides a great way to handle this sort of stuff using ng-hide/ng-show. So your css becomes

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

and your html becomes

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

You may also want to provide a fadeOut animation as well and apply it using css rule .fadeIn.ng-hide

Answer 2

I used @PLS timeout idea but kept the ng-class and added a variable that checks if it's on or off. Then always set it to false when you click before waiting for the timeout.

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

and the 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