6

emberjs ルーターhttp://jsbin.com/agameq/editを使用した例を次に示します。ここで、ルートが変更されたときに、fadeIn や fadeOut などのショーアップ アニメーションが必要です。私は何をすべきか？

4

2 に答える 2

9

すべてViewの残り火には、次の名前のメソッドがありdidInsertElementます。

ビューの要素がDOMに挿入されたときに呼び出されます。この関数をオーバーライドして、ドキュメント本文に要素を必要とする設定を行います。

すべての残り火ビューに$はjQueryへの参照であるaも含まれているため、ビュー内の一部の要素をラップして、次のような変更を適用できます。

// 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の修正バージョンです

于 2012-07-07T19:11:12.400 に答える
5

@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);
    }   
});
于 2012-07-08T17:05:22.067 に答える