Badge tabs


#1

Hi,

I would like to add a ‘pulse’ animation on the icon or on the badge from tabs. I need to add/remove a class according to variable in the scope.
Ex: when the user add an item I would like to add a pulse animation on the bag icon.

I need to be able to use something like ‘ng-class’ to add remove my animation depending on the scope.

<ion-tab data-ng-controller="CartTabCtrl" badge="itemsNumber" badge-style="badge-calm animated pulse" title="Panier"  icon="icon ion-bag " href="#/tab/panier">
<ion-nav-view name="panier-tab"></ion-nav-view>

In this example i would need to add ‘animated pulse’ class and then to remove it to trigger the animation

How could I achieve such a thing?

Thanks!


#2

Hi @gkielwasser,

Try doing:

badge-style="badge-calm {{shouldAnimate ? 'animated pulse' : ''}}"


#3

Thanks, it works!

However I can’t achieve what I would like to do by this way. I don’t know how to wait the end of the animation and then remove classes.

I was trying like this:

$scope.$watch(CartService.count, function(value, oldValue){
  if(value){
    $scope.shouldAnimate = true;
    $scope.itemsNumber = value;
  }

The pulse effect trigger once because of classes. After that I do not know how to remove them.

I think the best way would be to directly add a directive ‘pulsing’ to the badge which is listenning for a special event. The problem is how can I add this directive to the span.badge element?

potential directive:

.directive('pulsing', function($animate) {
	return{
	  link: function(scope,element,attrs) {
		scope.$watch('itemsNumber', function(newVal, oldVal) {
		  if(newVal != oldVal) {
			//start the animation!
			$animate.addClass(element.parent().s(),'pulse',function() {
				$animate.removeClass(element, 'pulse')
			});
		  }
		})
	  }
	}

here is my animation from css:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes pulse {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
  }
  50% {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
  }
  100% {
	-webkit-transform: scale(1);
	transform: scale(1);
  }
}

@keyframes pulse {
  0% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
  }
  50% {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
  }
  100% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
  }
}

.pulse{
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

Maybe It is not the best way to animate the badge…