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

我是新来的烬，但几乎完成了我设定要做的事情。我只需要将事物动画化为最后一步。EmberJS为DIV添加动画淡出和淡入操作事件

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

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

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

我能够执行动画，但selectedImage更新速度过快，因此新图像被transitionedOut和transitionedIn。

如果您有任何关于如何有效处理过渡动画的建议，它将会大大提高。

来源

2015-09-07 netvampire

只需在JavaScript中更改图形的类名即可。类似于'document.getElementById（“myImage”）。className =“myFadingCss”;' – MyDaftQuestions

请将相关代码添加到您的问题中，以便人们更容易回答。 –

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

来源

2015-09-07 15:44:53 jfhs

这是一个梦幻般的想法。感谢您向我介绍一个合适的解决方案。我打算使用这种方法。一个问题，我有一组“组件”，我想在用户点击按钮时淡入/淡入。但是，我需要一种技术来获取组件DIV元素ID。任何想法将不胜感激。 – netvampire

此链接帮助访问组件DIV元素ID [link]（http://stackoverflow.com/questions/26159979/how-to-get-emberjs-generated-element-id-in-controller） – netvampire

开箱即用的灰烬不会当你转出，因为支持动画过渡它只是从DOM中删除模板部分。并且Ember.View挂钩不支持promise。

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

所以我建议您使用Liquid Fire Addon这使得Ember以本地方式处理动画转换。

来源

2015-09-08 14:57:14

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

回答

相关问题