Магистральная магистраль - добавление визуального эффекта при переключении вида

Ответ 1

Области Marionette имеют метод под названием open, который по умолчанию просто заменяет HTML старого представления новым представлением. Вы можете переопределить этот метод, чтобы сделать любую понравившуюся анимацию. В документации по регионам:

Установить способ просмотра el

Если вам нужно изменить способ подключения представления к DOM, когда показывая представление через область, переопределите метод open область. Этот метод получает один параметр - представление для отображения.

Реализация по умолчанию 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");
}

Этот пример приведет к тому, что представление будет скользить вниз региона, а не просто появляться на месте.

Ответ 2

Вы можете переопределить функцию close на представлении, сделав что-то вроде этого:

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

И сделайте что-то подобное с вашими функциями render.

Ответ 3

Кажется, это работает для меня:

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

Ответ 4

Для будущих пользователей пользователи могут использовать мой плагин для поддержки перехода в марионетке.

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

Я использовал css3-переходы, поскольку у них больше аппаратная поддержка, чем анимация jquery. на нижней стороне, используя это делает асинхронный код, поэтому будьте осторожны с этим.

Ответ 5

Я думаю, это может быть полезно для вас.

Следующий плагин для марионетки, который добавляет 4 вида переходов. Там может быть легко добавлено больше типов перехода.

В основном вместо использования yourRegion.show(view)... вы можете использовать теперь yourRegion.showAnimated(view, {animationType: 'yourAnimation'});

он очень прост в использовании.

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

см. документацию по github для получения дополнительной информации