我可以在emberjs中为视图显示动画

Question

以下是使用emberjs路由器http://jsbin.com/agameq/edit的示例.现在我想在路线改变时有一些showup动画,比如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);
    }   
});