Question

只是想分享一些东西，希望能为别人节省时间。我用这个看似简单的概念挣扎了一段时间，但找不到符合我特定需求的东西。

问题：

我正在AngularJS中构建一个游戏，提示用户点击/点击ng-repeat元素，根据出现的场景做出选择。有一个持久的分数米/条。我希望将其宽度设置为使用所选ng-repeat项目的点值计算的百分比值的动画。这是我以前在jQuery中轻松做的事情，但Angular却让我陷入了困境。

解决方案：

我最终在我想要动画的元素的ng-style指令中使用了一个函数。由于该元素（得分栏）位于index.html，我还使用了rootScope。

所以，当我得到控制器中所选项目的点值时，如下所示：

$scope.getPoints = function(choice){
    $rootScope.earnedPoints = $rootScope.earnedPoints + choice.point_value;   
};

我可以计算百分比并为rootScope上的分数栏设置动画，如下所示：

 $rootScope.maxPoints = 100;
 $rootScope.earnedPoints = 0;
 $rootScope.updatePoints = function(value){
     if($rootScope.earnedPoints <= $rootScope.maxPoints){
         return {'width': ($rootScope.earnedPoints / $rootScope.maxPoints) * 100+'%', 'transition': 'width 1s' , '-webkit-transition': 'width 1s'};
     } else {
          return {'width': 100+'%'};
     }

然后，在视图中，updatePoints函数通过ng-style应用于记分栏元素，如下所示：

<div class="scoreBarInside" ng-style="updatePoints(value)"></div>

所以，现在，当点击/点击选项时，会计算百分比，并根据该百分比为分数栏设置动画。

这里是小提琴：http://jsfiddle.net/bjDesign/0mLksrym/18/

如果有人有更好的解决方案，我很乐意看到它。我真的很多地挖掘Angular ......有时候似乎很难弄清楚如何在UI中实现移动的流动性，我希望使用jQuery为我的客户提供。

基于AngularJS中动态值的元素动画宽度

问题：

解决方案：

0 个答案: