Ember.js Router: как оживить переходы состояния

Ответ 1

Billy Billing только что выпустил модуль Ember, который поддерживает анимированные переходы.

Ответ 2

Я объясню ответ Лесика. Если вам нужно применить его к нескольким представлениям сухим способом, вы можете создать класс настройки следующим образом:

App.CrossfadeView = {
  didInsertElement: function(){
    //called on creation
    this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
    //called on destruction
    this.$().slideDown(250);
  }
};

И затем в вашем коде вы применяете его на разных классах. Поскольку Ember зависит от jQuery, вы можете использовать практически любую анимацию jQuery.

App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);

Ответ 3

В этом же требовании добавьте мое приложение. Попробовал Ember Animated Outlet, но не дал необходимой мне гранулярности (анимации, специфичные для отдельных элементов).

Решение, которое сработало для меня, было следующим:

Изменить ссылкуТак как действие

{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}

становится...

<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>

Создать метод для goToTodos в текущем контроллере

App.IndexController = Ember.Controller.extend({
    goToTodos: function(){

        // Get Current 'this' (for lack of a better solution, as it late)
            var holdThis = this;

        // Do Element Specific Animation Here
            $('#something').hide(500, function(){

                // Transition to New Template
                    holdThis.transitionToRoute('todos');

            });

    }
});

Наконец - для анимации в элементах шаблона Todos используйте didInsertElement в представлении

App.TodosView = Ember.View.extend({
    didInsertElement: function(){

        // Hide Everything
            this.$().hide();

        // Do Element Specific Animations Here
            $('#something_else').fadeIn(500);

    }
});

До сих пор это самое элегантное решение, которое я нашел для анимации, специфичной для элемента при переходе. Если есть что-то лучше, хотелось бы услышать!

Ответ 4

Я знаю, что это довольно старый, но лучшим решением для этой контекстно-зависимой анимации сегодня является ember liquid fire.

Он позволяет делать такие вещи в файле перехода:

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};

Ответ 5

Я нашел другое решение, которое реализует анимацию в Views: ember-animate

Пример:

App.ExampleView = Ember.View.extend({

    willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }
}

Демо: авторский личный сайт

Ответ 6

App.SomeView = Ember.View.extend({
  didInsertElement: function(){
   //called on creation
   this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
   //called on destruction
   this.$().slideDown(250)
  }
});