14

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

4

5 回答 5

34

Marionette 区域有一个方法称为open，默认情况下只需将旧视图的 HTML 替换为新视图。你可以重写这个方法来做任何你喜欢的动画。从区域文档：

设置视图的el附加方式

如果您需要在通过区域显示视图时更改视图附加到 DOM 的方式，请覆盖该open区域的方法。此方法接收一个参数 - 要显示的视图。

默认实现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

这似乎对我有用：

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 回答
7

您可以覆盖close视图上的函数，执行以下操作：

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

render并对你的函数做类似的事情。

于 2012-07-26T18:55:24.560 回答
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 回答