14

ページを離れて（ビュー/レイアウトを閉じて）同じ領域で新しいページを開くときに効果を追加する便利な方法はありますか？（フェード効果のようなもの）

4

5 に答える 5

34

マリオネット領域には、openデフォルトで古いビューのHTMLを新しいビューに置き換えるだけのメソッドがあります。このメソッドをオーバーライドして、好きなアニメーションを実行できます。地域のドキュメントから：

ビューのelアタッチ方法を設定する

リージョンを介してビューを表示するときにビューがDOMにアタッチされる方法を変更する必要がある場合はopen、リージョンのメソッドをオーバーライドします。このメソッドは、表示するビューという1つのパラメーターを受け取ります。

のデフォルトの実装openは次のとおりです。

Marionette.Region.prototype.open = function(view){
  this.$el.html(view.el);
}

これにより、リージョンのコンテンツがビューの el/コンテンツに置き換えられます。ただし、トランジション効果などを容易にするために、これに変更することができます。

Marionette.Region.prototype.open = function(view){
  this.$el.hide();
  this.$el.html(view.el);
  this.$el.slideDown("fast");
}

この例では、ビューが所定の位置に表示されるのではなく、領域の上部から下にスライドします。

于 2012-07-27T02:26:08.350 に答える
7

close次のようにして、ビューの関数をオーバーライドできます。

close: function () {
  // fancy fade-out effects
  Backbone.Marionette.View.prototype.close.apply(this, arguments);
}

そして、あなたのrender関数と同じようなことをしてください。

于 2012-07-26T18:55:24.560 に答える
7

これは私にとってはうまくいくようです：

this.views = {
    messageItem: Marionette.ItemView.extend({
        template: Handlebars.templates.messaging_item,
        tagName: "li",
        className: "messaging-item",
        render: function(){
            this.$el.html(this.template(this.model.attributes));
            this.$el.hide();
        },
        onShow: function(){
            this.$el.slideDown(800);
        }
    })
};
于 2013-06-18T18:11:20.397 に答える
3

将来のユーザーのために、人々はマリオネットの移行サポートのために私のプラグインを使用することができます。

https://github.com/saqibshakil/Marionette.TransitionRegion/

css3トランジションは、jqueryアニメーションよりもハードウェアをサポートしているため、使用しました。欠点として、これを使用するとコードが非同期になるため、注意が必要です。

于 2013-09-14T11:59:51.190 に答える
1

これはあなたにとって役立つと思います。

4種類のトランジションを追加する次のマリオネットプラグイン。遷移タイプを簡単に追加できます。

基本的に、yourRegion.show（view）を使用する代わりに... yourRegion.showAnimated（view、{animationType：'yourAnimation'}）;を使用できるようになりました。

とても使いやすいです。

https://github.com/marcinkrysiak1979/marionette.showAnimated

詳細については、githubのドキュメントを参照してください

于 2015-03-11T10:09:00.397 に答える