Backbone Marionette - 切换视图时添加视觉效果 [英] Backbone Marionette - Add a visual effect when switching view

问题描述

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

Is there a convenient way to add an effect when I leave a page (close a view/layout) and open a new one in the same region ? (something like a fade effect)

推荐答案

Marionette 区域有一个名为 open 的方法，默认情况下只是用新视图替换旧视图的 HTML.您可以覆盖此方法以执行您喜欢的任何动画.来自区域文档:

Marionette regions have a method called open that by default just replace the HTML of the old view with the new view. You can override this method to do any animation you like. From the region documentation:

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

If you need to change how the view is attached to the DOM when showing a view via a region, override the open method of the region. This method receives one parameter - the view to show.

open 的默认实现是:

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

这会将区域的内容替换为视图的el/内容.你可以改变成你想要的任何东西，不过，促进过渡效果等等.

This will replace the contents of the region with the view's el / content. You can change to this be anything you wish, though, facilitating transition effects and more.

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

这个例子会导致一个视图从顶部向下滑动的区域，而不仅仅是出现在适当的位置.

This example will cause a view to slide down from the top of the region, instead of just appearing in place.

这篇关于Backbone Marionette - 切换视图时添加视觉效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！