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!
andy
March 27, 2014, 12:09pm
2
Hi @gkielwasser ,
Try doing:
badge-style="badge-calm {{shouldAnimate ? 'animated pulse' : ''}}"
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…