Question

我是新手，但几乎完成了我的目标。作为最后一步，我只需要制作动画。

我正在使用animate.css和animateCSS来制作动画。

我有一组标签。当用户点击每个按钮时，我在我的控制器中调用onBtnClicked上的动作。单击此按钮时，我基本上将控制器上的selectedImage属性更改为其他URL。 selectedImage属性会自动更新标记，并在网站上更改图像。

我想要做的是当用户点击按钮，运行动画以过渡到selectedImage并转换到新图像时。

我能够执行动画，但是selectedImage更新得太快，因此新图像已经过渡并且已经过渡。

如果您对如何有效地处理过渡动画有任何建议，那将是非常有用的。

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以原生方式处理动画过渡。

EmberJS为DIV添加动画以淡出和淡入动作事件

2 个答案: