AngularJS Live Example

by witq

HTML

<body ng-app="HelloApp" ng-controller="appCtrl">
    <div class="big" transiterate="val"></div>
    <div class="big" transiterate="val2"></div>
</body>

CSS

div {
    font-family: sans-serif;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}
div.big {
    font-size: 60px;
    color: #666;
}

JavaScript

angular.module('HelloApp', [])
    .directive('transiterate', function ($filter) {
        return {
            restrict: 'A',
            scope: {
                value: '=transiterate'
            },
            link: function(scope, element, attrs, controller) {
                function easyTerate(from, to, duration) {

                    var easeInOutExpo = function (t, b, c, d) {
                        if (t === 0) return b;
                        if (t === d) return b + c;
                        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
                    },
                    diff = to - from,
                    dur = duration || 800,
                    startTime = performance.now(),
                    el = document.getElementById('value');
                
                    function frame(time) {
                        var animTime = time - startTime;
                        if (animTime >= duration) {
                            element.text(to);
                        } else {
                            var val = easeInOutExpo(animTime, from, diff, dur);
                            element.text(Math.round(val));
                            setTimeout(function () {
                                requestAnimationFrame(frame);
                            }, 1000 / 60);
                        }
                    }
                
                    requestAnimationFrame(frame);
                
                }
                scope.$watch('value', function(newValue, oldValue) {
                    if (newValue) {
                        if (!oldValue) {
                            oldValue = 0
                        }
                        easyTerate(oldValue, newValue, 1000);
                    }
                });
            }
        }
    })
    .controller('appCtrl', function($scope, $interval) {
        $scope.val =...