Маршрутизация, выходы и анимация Ember.js

Кажется, что если вы хотите оживить переход между состояниями, используя новый маршрутизатор Ember.js и выходы, вам не повезло, так как предыдущий контент розетки будет уничтожен, прежде чем у вас будет возможность его оживить, В случаях, когда вы можете полностью оживить один вид до перехода в новое состояние, нет проблем. Это только тот случай, когда как старые, так и новые взгляды должны быть видны, что проблематично.

Похоже, что некоторые функции, необходимые для анимации как предыдущего содержимого, так и нового, были добавлены в this commit, Я не знаю, как это использовать.

Также обсуждалось использование дополнительных переходных маршрутов/состояний, чтобы явно моделировать "промежуточные" состояния, которые могут представлять анимации (здесь и здесь), но я не уверен, что в настоящее время можно сопоставить этот подход с выведенными контроллерами и представлениями.

Это похоже на How * not *, чтобы уничтожить View при выходе из маршрута в Ember.js, но я не уверен, что переопределение вспомогательного элемента outlet хорошее решение.

Любые идеи?

Ответ 1

Вы должны проверить это: https://github.com/billysbilling/ember-animated-outlet.

Затем вы можете сделать это в своих шаблонах Handlebars:

{{animatedOutlet name="main"}}

И переход из этого маршрута следующим образом:

App.ApplicationRoute = Ember.Route.extend({
    showInvoice: function(invoice) {
        this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice);
    }
});

Ответ 2

В настоящее время я переопределяю didInsertElement и willDestroyElement в некоторых классах просмотра для поддержки анимации. didInsertElement немедленно скрывает элемент, а затем оживляет его в представлении. willDestroyElement клонирует элемент и оживляет его вне поля зрения.

didInsertElement: function ()
{
    this.$().slideUp(0);
    this.$().slideDown(250, "easeInOutQuad");
},

willDestroyElement: function ()
{
    var clone = this.$().clone();
    this.$().replaceWith(clone);
    clone.slideUp(250, "easeInOutQuad");
}

Лично я не хочу начинать обматывать свои выходные в избыточных ContainerView только для поддержки анимаций.