Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
  <meta charset="utf-8">
  <title>Basic animate on model change</title>
  <style>    
    [animate-model-change]{
      transition: 0.3s color ease;
    }
    
    .up{
      color:green;
    }
    
    .down{
      color:red;
    }
  </style>
  
</head>
<body ng-app="app" ng-controller="Ctrl">
  <span animate-model-change model="{{someModel}}">{{someModel}}</span>
  
  <footer>
    <button ng-click="updateModel(1)">+</button>
    <button ng-click="updateModel(-1)">-</button>
  </footer>
</body>
</html>
 
angular.module('app', [])
       .controller('Ctrl', ctrl)
       .directive('animateModelChange', animateModelChange);
function ctrl($scope){
  $scope.someModel = 0;
  
  $scope.updateModel = function updateModel(val){
    $scope.someModel += val;
  };
}
function animateModelChange($timeout){
  function animateModelChangeLink(scope, element, attrs){
    var timer = null,
        incrementClass = 'up',
        decrementClass = 'down';
    
    function modelChanged(newVal, oldVal){
      var changeClass = null;
      
      // Clear previous timeout.
      if(timer){
        $timeout.cancel(timer);
        timer = null;
      }
      
      if(newVal && newVal !== oldVal && angular.isNumber(Number(newVal)) && !isNaN(Number(newVal))){
        if(Number(newVal) < Number(oldVal)){
          changeClass = decrementClass;
        } else {
          changeClass = incrementClass;
        }
      }
      
      element.addClass(changeClass);
      
      timer = $timeout(function removeClasses(){
        element.removeClass(incrementClass);
        element.removeClass(decrementClass);
      }, 300);
    }
    
    scope.$watch(function(){ return attrs.model; }, modelChanged);
  }
  
  
  return {
    restrict: 'A',
    link: animateModelChangeLink
  };
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
danmindrupro
0viewers