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添加動畫淡出和淡入操作事件

回答

相關問題