Ember.js路由，插座和動畫

看起來好像如果要使用新的Ember.js路由器和插座爲狀態之間的轉換設置動畫效果，那麼運氣不好，因爲插座的前一內容將被破壞在你有機會製作動畫之前。如果在轉換到新狀態之前可以完全製作一個視圖的動畫，則沒有問題。只有在新舊觀點都需要可見的情況下才會出現問題。Ember.js路由，插座和動畫

它看起來像一些功能需要動畫以前的插座內容和新增加在this commit，但我不知道如何使用它。

還有一些關於使用額外的過渡路線/狀態來顯式建模動畫可以表示的「中間」狀態的討論（here和here），但我不確定當前是否可以匹配這種方法與出口控制器和意見。

這類似於How *not* to destroy View when exiting a route in Ember.js，但我不知道重寫outlet助手是一個很好的解決方案。

任何想法？

來源

2012-07-31 adamesque

相關[Ember.js路由器：如何動畫狀態轉換（

{{animatedOutlet name="main"}}

從這樣的路線中

和過渡http://stackoverflow.com/questions/14521847/ember-js-router-how-to-animate-state-transitions/） – 2014-02-06 09:42:10

你應該看看這個：https://github.com/billysbilling/ember-animated-outlet。

然後你就可以在你的手把模板做到這一點：

App.ApplicationRoute = Ember.Route.extend({ 
    showInvoice: function(invoice) { 
     this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice); 
    } 
});

來源

2013-04-08 18:48:33

基於http://emberjs.com/blog/2013/08/31/ember-1-0-released.html，我感到很舒服，現在說這是正確的答案; 'ember-animated-outlet'「將進入未來版本的Ember」。 – adamesque 2013-09-05 15:51:25

我目前在我的一些視圖類中重寫了didInsertElement和willDestroyElement以支持動畫。 didInsertElement立即隱藏該元素，然後將其移動到視圖中。 willDestroyElement克隆該元素並將其動畫化。

didInsertElement: function() 
{ 
    this.$().slideUp(0); 
    this.$().slideDown(250, "easeInOutQuad"); 
}, 

willDestroyElement: function() 
{ 
    var clone = this.$().clone(); 
    this.$().replaceWith(clone); 
    clone.slideUp(250, "easeInOutQuad"); 
}

就個人而言，我並不想開始我的包裹網點多餘ContainerViews只是爲了支持動畫。

來源

2012-07-31 20:33:07

這是一個很好的答案，但在閱讀[this]（https://github.com）後/emberjs/ember.js/issues/1017）我正在考慮內置的支持，我要求的內容不會在v1.1之前到達。（0） – adamesque 2012-08-01 00:38:24

didInsertElement：function（）{ this。$（'＃top_items'）。fadeOut（0）; this。$（'＃top_items'）。fadeIn（1500）; }， – lesyk 2013-04-02 12:35:08

在Ember 1.0中，這不再有效。視圖在使用replaceWith（）之前被銷燬。而是預先添加到視圖的父容器中。 this。$（）。parent（）。prepend（clone）; – narkeeso 2013-10-01 08:05:21

Ember.js路由，插座和動畫

回答

相關問題