Can I submit an animation representation in emberjs

Question

Here is an example using the emberjs router http://jsbin.com/agameq/edit . Now I want to have an animation to show, for example, fadeIn or fadeOut, when the route is changed. what should I do?

Answer 1

Each View in ember has a method called didInsertElement :

Called when a view element has been inserted into the DOM. Override this function for any setting that requires an element in the document body.

All ember views also have $ , which is a jQuery reference, so you can wrap some element in it in your view and apply any changes to it, such as:

 // this will animate only the tag h2, which in your case is the title of the users view App.UsersView = Ember.View.extend({ templateName: 'users', didInsertElement: function() { this.$('h2').animate({ fontSize: "3em" }, 900 ); } }); 

Or you can call it without arguments (e.g. $() ) to return the current view wrapped by jQuery.

To animate the view when entering this view / route, do this in your App.UsersView :

 // this will animate the entire view App.UsersView = Ember.View.extend({ templateName: 'users', didInsertElement: function() { this.$().animate({ fontSize: "3em" }, 900 ); } }); 

( Note : my animation is pretty lame, but it just shows where to call methods, make a real animation)

Here's a modified version of your JSBin

Answer 2

After the answer from @MilkyWayJoe, you probably want to hide the view before inserting it by setting the isVisible property to false :

 App.UsersView = Ember.View.extend({ templateName: 'users', isVisible: false, didInsertElement: function() { var self = this; this.$().fadeIn(700, function(){ self.set('isVisible', true); //inform observers of `isVisible` }); } }); 

Or use this Mixin animation , which allows you to animate views by changing the set of observable CSS properties:

 App.UsersView = Ember.View.extend( JQ.Animate, { templateName: 'users', isVisible: false, // Observed CSS properties cssProperties: ['display'], // Optional animation properties duration: 700, easing: 'easeInOutCubic', didInsertElement: function() { this.set('display', 'block'); }, afterAnimate: function() { this.set('isVisible', true); } });