ember.js - Ember Component: Animation effect while showing the component -

i have ember component defined, , when click on button toggling property shows component.

i need apply animation effect when showing component. animation effects slidedown/slideup.

i not sure how give animation effect ember components.

template:

<script type="text/x-handlebars" data-template-name="index">     <button {{action 'showdiv'}}>show div</button>     <br>     <br>     {{#if showdiv}}         {{temp-animation}}     {{/if}} </script> 

app.js:

app.indexroute = ember.route.extend({     actions:{     showdiv: function(){         this.controller.toggleproperty('showdiv');     }     } });  app.indexcontroller = ember.controller.extend({     showdiv:false }); 

jsbin demo

you need take advantage of didinsertelement event on component.

here working fiddle: http://jsbin.com/poxupuso/1/edit

i refactored code little bit. pulled actions out of route , put them the controller.

app.indexroute = ember.route.extend({});  app.indexcontroller = ember.controller.extend({   showdiv:false,   actions:{     showdiv: function(){       this.toggleproperty('showdiv');     }   } });   app.tempanimationcomponent = ember.component.extend({   didinsertelement: function () {     this.$('.animdiv').slidedown();   } }); 

i added display:none .animdiv can animate hidden state.

.animdiv{   width:200px;   height:100px;   border: 1px solid red;   display: none; } 

this basic example. luck!