EmberJS Добавляет анимации в DIV для Fade Out и Fade In на мероприятии Actions

Question

Я новичок в Ember, но почти закончил то, что я намеревался сделать. Мне просто нужно оживить вещи как последний шаг.

Я использую animate.css и animateCSS для моей анимации.

У меня есть набор тегов. Когда пользователь нажимает на каждую кнопку, я вызываю действие onBtnClicked в моем контроллере. Когда эта кнопка нажата, я в основном изменяю свойство selectedImage на своем контроллере на другой URL. Свойство selectedImage автоматически обновляет тег и изображение изменяется на веб-сайте.

То, что я хотел бы сделать, - это когда пользователь нажимает на кнопку, чтобы запустить анимацию для перехода из выбранного элемента изображения и перехода в новом изображении.

Я в состоянии выполнить анимацию, но selectedImage обновляется слишком быстро, и, таким образом, новое изображение transitionedOut и transitionedIn.

Если у вас есть какие-либо советы о том, как эффективно обрабатывать анимацию перехода, это будет очень полезно.

Answer 1

Вы можете просто сначала запустить анимацию transitionOut, и только тогда, когда она полностью установит свойство. Что-то вроде этого:

  actions: {
    select: function(item) {
      var me = this;
      Ember.$("img").fadeOut(function() {        
        me.set('currentImage', item);
        Ember.$("img").fadeIn();
      });
    }
  }

Я сделал небольшую демонстрацию с анимацией jQuery (animateCSS, кажется, использует те же обратные вызовы) http://emberjs.jsbin.com/hiyatajeve

Answer 2

Из коробки Ember не поддерживает анимированные переходы, так как при выходе из системы он просто удаляет частичный шаблон из DOM. А также Ember.View крючки не поддерживают обещания.

Мне лично не нравится управлять представлениями из контроллеров, это еще один уровень абстракции.

Поэтому я бы порекомендовал вам использовать Liquid Fire Addon, который заставляет Ember обрабатывать анимированные переходы естественным образом.