Question

http://jsbin.com/qoyudape/4/edit

Every time you click update, item gets inserted. I would like to blink item red for one second after insertion, like on stackoverflow when linking to answer, it blinks orange for a second https://stackoverflow.com/a/22645880/1175593

How do I do that ?

Only CSS doesn't work, because I want the effect only on newly added items, and not on initial load

Was it helpful?

Solution

I don't know CSS, but this, Using CSS for fade-in effect on page load, seems to be just fine...

http://jsbin.com/qoyudape/6/edit

note, the render stuff I did isn't necessary, you could have just as easily done it without it...

http://jsbin.com/qoyudape/8/edit

or when the item is inserted into the page, you can do time sensitive animation

App.BlinkingFooView = Em.View.extend({
  didInsertElement: function(){
     if(this.get('controller.b') % 2 === 0){
       this.$().addClass('mod')
     } 
  }
});

http://jsbin.com/qoyudape/11/edit

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top