EmberJS 将动画添加到 DIV 以在 Actions 事件中淡出和淡入答案

【问题标题】：EmberJS Add Animations to DIV for Fade Out and Fade In on Actions EventEmberJS 将动画添加到 DIV 以在 Actions 事件中淡出和淡入
【发布时间】：2015-09-07 13:42:36
【问题描述】：

我是 ember 新手，但我几乎完成了我打算做的事情。我只需要为最后一步制作动画即可。

我正在为我的动画使用 animate.css 和 animateCSS。

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

我想做的是当用户点击按钮时，运行动画来transitionOut selectedImage和transitionIn新图像。

我能够执行动画，但是 selectedImage 更新太快，因此新图像是 transitionedOut 和 transitionedIn。

如果您对如何有效处理转场动画有任何建议，我们将不胜感激。

【问题讨论】：

只需在 JavaScript 中更改图形的类名。类似document.getElementById("myImage").className = "myFadingCss";
请将相关代码添加到您的问题中，以便人们回答。

标签： javascript jquery css ember.js animate.css

【解决方案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

【讨论】：

这是一个绝妙的主意。感谢您为我提供合适的解决方案。我打算使用这种方法。一个问题，我有一组“组件”，当用户单击按钮时，我想淡出/淡入。但是，我需要一种技术来获取组件 DIV 元素 ID。任何想法将不胜感激。
此链接有助于访问组件 DIV 元素 ID link

【解决方案2】：

开箱即用 Ember 不支持动画过渡，因为当您过渡时，它只是从 DOM 中删除模板部分。而Ember.View 钩子不支持承诺。

我个人不喜欢从控制器管理视图，这是另一个抽象层。

所以我建议你使用Liquid Fire Addon，它可以让 Ember 以原生方式处理动画过渡。

【讨论】：