Blinking badge

Webix JS
1

Hello,

Im using a badge in a list item using the following list template where the 6th list item has a badge (each item has a centered icon with a text value below):

template:function(obj) {
  if (obj.id == 6) return "<div style='text-align:center; height:25px'><span class='webix_icon " + obj.icon + "'</span></div>" + obj.value + " <span class='webix_badge'>" + obj.unviewed + "</span>";   
 else return "<div style='text-align:center; height:25px'><span class='webix_icon " + obj.icon + "'></span></div>" + obj.value;
},

I can update the badge as needed by updating the unviewed property on the item and then refreshing the list. All that works.

I would like the badge (or the item if it cant be done for the badge alone) to blink when the unviewed value is > 0 to draw the attention of the user to that so they know there are unviewed documents. Ive tried a few things for the list item like:

var item = $$("itemList").getItem(6);
item.unviewed = 1;  // test
var node = $$("itemList").getItemNode(item.id);	
if (item.unviewed > 0) webix.html.addCss(node,"blinking_Item");	
else webix.html.removeCss(node,"blinking_Item");
$$("itemList").refresh();

with a css defined as:

.blinking_Item{
    -webkit-animation: blinking 1s infinite;
}
@-webkit-keyframes blinking {
    0% {
		opacity:0.2;
	}
	50% {
		opacity:1;   
	}
	100% {
		opacity:0.2;
	}
}

I could not get it to work.
Any suggestions?

Thanks you,
Pieter

2

Ive got it work by putting the css in the template of the list:

if (obj.id == 6) {
var badgecss = “”;
(obj.unviewed > 0)?badgecss = “blinking_Item”:badgecss = “”;
return “

” + obj.value + " " + obj.unviewed + “”;
}