EmberJS: adding transition to ‘didInsertElement’

When inserting a new element into the DOM it is normal to add a CSS transition to give a visual cue to the user. I was, however, struggling with doing this in Ember. But — with a bit of help from my colleague — we found a solution. I blog it here in case other people struggle with the same thing and for my goldfish-like ability to retain important stuff.


App.MyNewComponent = Ember.Component.extend({
    classNameBindings: [ ':my-new-component', 'show' ],
    // could also be written as
    // classNameBindings: [ ':my-new-component', 'show:my-custom-class' ],
    show: false,
    transitionIn:function()
    {
        Ember.run.next( this, function()
        {
            this.set( 'show', true );
        });
    }.on( 'didInsertElement' ),
});

The important thing here is to pass the context of this to the run.next function.

Then everything is just done as normal:


.my-new-component
{
    opacity:0;
    transition:opacity 1s;
}
.my-new-component.show
{
    opacity:1;
}