这是一个使用 emberjs 路由器 http://jsbin.com/agameq/edit 的示例。 现在我想要一些显示动画，比如当路由改变时，fadeIn 或fadeOut。我该怎么办？
【问题讨论】：
标签： javascript view ember.js router
ember 中的每个View 都有一个名为didInsertElement 的方法：
当视图的元素被插入到 DOM 时调用。 覆盖此函数以执行任何需要其中元素的设置 文档正文。
所有 ember 视图也有一个 $，它是对 jQuery 的引用，因此您可以用它在视图中包装一些元素并对其应用任何更改，例如：
// 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 );
}
});
或者你可以不带参数调用它（比如$()）来返回jQuery包裹的当前视图。
要在您进入该视图/路线时为该视图设置动画，请在您的 App.UsersView 中执行此操作：
// this will animate the entire view
App.UsersView = Ember.View.extend({
templateName: 'users',
didInsertElement: function() {
this.$().animate({ fontSize: "3em" }, 900 );
}
});
（注意：我的动画很蹩脚，但只是为了显示在哪里调用方法，做一个真正的动画）
这是your JSBin的修改版
【讨论】：
animate 函数，因为 Ember 已经将它提供给它的视图，你所需要的只是对 jQuery 的脚本引用跨度>
load，它将从服务器加载数据。现在我希望视图在数据加载完成时有一个fadeIn 动画。我想在load这样的this.get('view').fadeIn()函数中获取控制器的view，如何获取参考？
根据@MilkyWayJoe 的回答，您可能希望在插入视图之前隐藏视图，方法是将isVisible 属性设置为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`
});
}
});
或者使用this animation Mixin，它允许您通过更改一组观察到的 CSS 属性来为视图设置动画：
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);
}
});
【讨论】：