Activate a CSS Class by an array sequence with AngularJS

Question

I have 6 divs that I want to activate a heartbeat CSS animation, however, I would like to do that by a sequence.

For example, I have an array:

self.generatedSequence = [0,3,5,3];

Each item in the array means the position of the div that will receive the heartbeat function.

Each dive is a UI component from AngularJs:

<div class="grid-cell"
    ng-class="{'heartbeat': $ctrl.isActive
    }"
></div>

I'm trying to use the controller to activate the HeartBeat animation in every position by a sequence. So in that example will be like

The position 0 will takes 1s
The position 3 will takes 1s after the position 0
The position 5 will takes 1s after the position 3
The position 3 will takes 1s after the position 5

So all the animation will take 4s.

I tried to do that with $timeout, but it does the both at the same time.

https://codepen.io/guifeliper/pen/pwdKKj

You can use css for the whole thing, and angular just to set the animation/transition delays to set the order. — mikepa88
– mikepa88, Commented Jun 27, 2017 at 16:07

Pop-A-Stash · Accepted Answer · 2017-06-27 16:31:03Z

1

You want to use $interval, not $timeout since $timeout only runs once.

$ctrl.stopInterval = $interval(function () {
  $ctrl.heartbeatId = $ctrl.generatedSequence.shift();

  // be sure to clean up afterwards
  if($ctrl.generatedSequence.length == 0) {
    $interval.cancel($ctrl.stopInterval);
  }

}, 1000);

And change your grid cells ng-class directives like this:

<div class="grid-cell" ng-repeat="grid in $ctrl.gridBox"
    ng-class="{'heartbeat': $ctrl.heartbeatId == grid }"></div>

https://codepen.io/jdoyle/pen/xrPJwW

edited Jun 27, 2017 at 16:31

answered Jun 27, 2017 at 16:24

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guilherme Felipe Reis Over a year ago

That's the exact answer that I was looking for. Thank you!

Collectives™ on Stack Overflow

Activate a CSS Class by an array sequence with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related