0

So I want an animation in my ionic app:

  $scope.$watch("room.game.blackCard.text",
        function( newValue, oldValue ) {
            if(newValue === oldValue) {return false;}
            else if (oldValue == null || oldValue.length == 0 ) {return false;}
            else {
                $scope.room.game.blackCard.animate = 'animated bounceOutLeft';
                $timeout( function(){
                    $scope.room.game.blackCard.animate = 'animated bounceInRight';
                }, 2000);
            }
        }
    );

I know it's not healthy to use watch but my problem is that I want to apply the second class when the variable has changed, is there a way to detect the post-update variable?

I noticed the 'watch is triggered on a pre-update variable.

If I could detect post-update then I would apply the $timeout.

Problem: When the div slides to the left the text changes in mid-animation then a the div comes back from the left.

Q1: Can I detect post-update variable?

Q2: Can I delay the variable update? (ex: Set the new var in the callback of settimeout -> $timeout callback)

ka_lin
  • 9,329
  • 6
  • 35
  • 56
  • is your `room.game.blackCard.text` a `ng-model` on an `input`/`select` i.e. updated in a form? – mani Apr 13 '16 at 22:43
  • It's not binded in a ng-model, it changes via socket server (emits an update). – ka_lin Apr 14 '16 at 07:09
  • 1
    okay - you should be able to use `debounce` to delay the variable update. See this example that uses lodash debounce: http://stackoverflow.com/questions/21088845/can-i-debounce-or-throttle-a-watched-input-in-angularjs-using-lodash – mani Apr 14 '16 at 10:19
  • Thank you!!! I'll try it. I did not see that post. – ka_lin Apr 14 '16 at 11:34

0 Answers0