如何使用Angular暂停Bootstrap进度条宽度转换？

Question

我目前正在使用带有css转换的Bootstrap进度条，以便在$ timeout运行的同时运行0到100％的宽度。当我打开confirm（）框时，$ timeout暂停，但css转换不会。有没有更好的方法将两者联系在一起，所以过渡也可以暂停？

这是我的代码 - 它会侦听start属性以更改为true。

.directive('myTimer', function($timeout){
    return {
        restrict: "E",
        scope: {
            duration: '@',
            start: '@'
        },
        replace: true,
        template: "<div class='progress'><div class='progress-bar' role='progressbar' style='-webkit-transition: width {{duration}}s linear; transition: width {{duration}}s linear'></div></div>",
        link: function(scope, element, attrs){
            attrs.$observe('start', function(a){
                if (a === 'true') {
                    $timeout(function(){
                        element.addClass('active');
                    }, 1);
                }
            });
        }
    };
})

.controller('myController', function($scope){
    var chosenTimeSec = $scope.chosenTime * 1000;
    $scope.timer = $timeout(function(){
        $scope.finish();
    }, chosenTimeSec);
})

----

<my-timer duration="{{chosenTime}}" start="{{timerStarted}}"></my-timer>