javascript - EmberJS 将动画添加到 DIV 以在操作事件上淡出和淡入

标签 javascript jquery css ember.js animate.css

我是 ember 新手,但几乎完成了我打算做的事情。我只需要为事物设置动画作为最后一步。

我在动画中使用 animate.css 和 animateCSS。

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

我想做的是,当用户单击按钮时,运行动画以过渡出所选图像并过渡到新图像。

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

如果您对如何有效处理过渡动画有任何建议,我们将不胜感激。

最佳答案

您可以简单地先运行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

关于javascript - EmberJS 将动画添加到 DIV 以在操作事件上淡出和淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32440165/

相关文章:

jquery - 单击侧边栏中的元素时防止主窗口滚动

jquery - 当我使用 CSS 为该行中的单元格添加边框时,如何锁定表格行的高度?

javascript - 使用 jquery 操作::选择

javascript - 鼠标悬停问题

javascript - 如何使用 Javascript 更改 onmouseover 事件?

javascript - 如何在 HTML 属性内的函数调用中将变量作为参数传递?

javascript - 在不知道文件名的情况下获取文件扩展名

javascript - 没有滚动的地方时,如何在 Microsoft Chrome 上 overflow hidden 滚动条?

jquery - 移动选中的 jQuery 上的复选框

javascript - asp.net mvc 加载第一个条目和其他条目 - 迟到