I need some help with a coding issue, could someone assist in making my question clearer?
I'm working on creating an animation that triggers when the value of an object changes. I used ngClass to assign a class to an element based on the object's value. However, if the initial value already meets the condition for the class, the animation still plays. How can I prevent this from happening? User input cannot be relied upon to trigger the change, as there are asynchronous events that may alter the object's value.
JSFiddle example: https://jsfiddle.net/s6cdgyLb/ Unfortunately, AngularJS doesn't work well with JSFiddle...
Plunkr example: https://plnkr.co/edit/LPJXRq1SWQWrqGaow5tR?p=preview
This is the desired flow:
Page Load --> Question Answered --> color greenUser Answers Question --> Animate --> color green
The current flow looks like this:
Page Load --> Question Answered --> Animate --> color greenUser 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>