javascript - 我可以在 emberjs 中给视图显示动画吗

Question

这是使用 emberjs 路由器http://jsbin.com/agameq/edit的示例。现在我想要一些显示动画，比如当路由改变时，fadeIn 或fadeOut。我该怎么办？

Answer 1

每一个Viewember 都有一个名为 的方法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 );
    }   
});

（注意：我的动画很蹩脚，但这只是为了显示调用方法的位置，做一个真正的动画）

这是您的 JSBin的修改版本

Answer 2

根据@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`
        });
    }   
});

或者使用这个动画 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);
    }   
});