Question

我不确定如何说出这个问题，为了清楚起见，请根据需要进行编辑。

如果对象的值发生变化，我正在尝试提供动画，这对ngClass很容易。我根据对象的值为元素分配一个类。但是，如果在加载时确定类的值已经为true，则动画仍会播放。我怎么能绕过这个？我也不能依赖用户输入来触发更改，因为异步应用程序事件也可能会更改对象值。

~~示例JSFiddle：https://jsfiddle.net/s6cdgyLb/~~ AngularJS不想玩JSFiddle ... 示例Plunkr：https://plnkr.co/edit/LPJXRq1SWQWrqGaow5tR?p=preview

我正在努力实现这种流程：

Page Load --> Question Answered --> color green

User Answers Question --> Animate --> color green

我得到了这个流程：

Page Load --> Question Answered --> Animate --> color green

User Answers Question --> Animate --> color green

var myApp = angular.module('myApp2', []);

myApp.controller('myController', ['$scope', function($scope){
    $scope.list = [
        {
           value: "Some stuff",
           answered: true
        },
        {
           value: "More Stuff",
           answered: false        
        }
    ];
}]);

myApp.directive('questionCheckbox', function(){
    function link(scope, element, attrs){
        element.bind('click', function(){
            scope.$apply(function(){
                question.answered = element.checked;
            })
        });
    };
    return {
        link: link
    }
});

        @keyframes answered {
            0% {background-color: inherit;}
            70% {background-color: hsla(125, 100%, 34%, 0.65);}
            100% {background-color: hsla(125, 100%, 34%, 0.2);}
        }        
        
        .answered {
            animation: answered 2s;
            animation-fill-mode:forwards;
        }

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp2" ng-controller="myController">
      <div ng-repeat="question in list">
        <div ng-class="{answered: question.answered}">
          <input type="checkbox" ng-model="question.answered">
          <span>{{question.value}}</span>
        </div>
      </div>
    </div>
  </body>

</html>

Answer 1

您可以使用CSS转换创建行为。这是有效的，因为angular最初使用“已应答”类来渲染模板，因此它永远不会触发转换。

.answered {
  background: hsla(125, 100%, 34%, 0.2);
  transition: 2s;
}

Answer 2

希望以下内容可能有用。请注意，如果在完成之前单击另一个复选框，则动画会被切断。如果你想在版本下看到它们，我会从你的plunkr中分出我的更改。

所以这是我使用的代码。在$scope.list下方的控制器内，我放置（以下代码）来控制.plain和.animated类：

$scope.setIndex = function (index, answered) {
    if (answered) {
        $scope.selectedIndex = index;
    } else {
        $scope.selectedIndex = -1;
    }
};

我使用了三个不同的类来控制外观：

.answered {
    background-color: hsla(125, 100%, 34%, 0.2);
}

.animated {
    animation: answered 2s;
    animation-fill-mode:forwards;
}

.plain {
    background: none;
}

最后，我添加的HTML是（this）来控制.animated和.plain类：

<div ng-class="{answered: question.answered, animated: $index === selectedIndex, plain: !question.answered}">
    <input type="checkbox" ng-model="question.answered"
           ng-click="setIndex($index, question.answered)">
    <span>{{question.value}}</span>
</div>

如何通过ngClass分配不同的类来促进值变化的动画与负载上已经为真的值相比？

2 个答案: