Backbone.js 主干木偶-切换视图时添加视觉效果

当我离开一个页面（关闭视图/布局）并在同一区域打开一个新页面时，是否有一种方便的方法来添加效果？（类似于淡入淡出效果）

您可以覆盖视图上的

关闭

功能，执行以下操作：

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

---

并对

渲染

函数执行类似操作。

木偶区域有一个名为

打开

的方法，默认情况下，该方法仅将旧视图的HTML替换为新视图。您可以替代此方法来制作任何您喜欢的动画。从：

设置视图的

el

的附着方式 如果需要更改视图附着到DOM的方式 通过区域显示视图，覆盖 区域此方法接收一个参数-要显示的视图

open

的默认实现是：

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

这将用视图的内容替换区域的内容

el

/content。你可以随意改变， 尽管如此，促进过渡效应等

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

此示例将导致视图从顶部向下滑动

---

这似乎适合我：

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);
        }
    })
};

---

对于未来的用户，人们可以使用我的插件在木偶过渡支持

---

我使用css3转换，因为它们比jquery动画有更多的硬件支持。另一方面，使用它会使代码异步，因此请小心。

我认为这可能对您有用

下面的木偶插件添加了4种过渡。可以轻松添加更多的转换类型

基本上不使用yourRegion.show（view）。。。 现在可以使用yourRegion.showAnimated（视图，{animationType:'yourAnimation'}）

它很容易使用

---

有关更多信息，请参阅github上的文档

您将此页面放在何处？在你的app.js中，这让我找到了我的答案。我将以下内容放入了用于集合中每个项目的视图的onShow方法中。完美地解决了这个问题。把皮放在渲染器里对我来说是件坏事<代码>此。$el.hide（）

this.$el.slideDown（“快速”）

FYI，在最近版本的木偶中，

open

方法现在是

attachHtml

。结帐：