Ember.js路由器：如何動態化狀態轉換

有人找到了一種動態轉換狀態的好方法嗎？Ember.js路由器：如何動態化狀態轉換

路由器立即從DOM中刪除視圖。問題在於，我不能推遲到動畫結束。注意：我正在使用v1.0.0-pre.4。

2013-01-25 david8401

你有沒有考慮到['Ember.View＃willDestroyElement'（HTTP加入過渡類到您的視圖：// emberjs。 COM/API /班/ Ember.View。HTML＃event_willDestroyElement）？ – MilkyWayJoe

fwiw，我下面關於[ember liquid fire]（http://ember-animation.github.io/liquidfire/）的回答被認爲是目前這種情況下的最佳做法:) – max

比利的賬單剛剛發佈了支持動畫轉換的Ember module。

來源

2013-04-09 23:01:08 camdub

我剛從燼裏開始。鏈接的頁面顯示爲：「需要注意的事項：[...]動畫在使用不同模型轉換到相同路徑時不會執行，這是由於Ember重複使用同一DOM元素的方式，在動畫支持登陸1.1版的Ember核心之前不會被固定。「所以我的問題 - 這個答案是最新的嗎？使用emper 2.10來路由動畫的最佳選擇是什麼？ – Benjamin

App.SomeView = Ember.View.extend({ 
    didInsertElement: function(){ 
    //called on creation 
    this.$().hide().fadeIn(400); 
    }, 
    willDestroyElement: function(){ 
    //called on destruction 
    this.$().slideDown(250) 
    } 
});

來源

2013-01-25 17:42:34 lesyk

我知道那些鉤子，然而，這些都沒有幫助我完成工作。問題是* didInsertElement *和* willDestroyElement *是特定於該視圖。爲了平滑過渡，我需要知道路由器正在轉換到的其他視圖是否準備好，然後執行動畫/轉換，然後銷燬前一視圖。換句話說，我正在尋找更多*異步* - 行爲。 – david8401

我會擴展Lesyk的答案。如果您需要將其應用到多個視圖在乾燥的方式，你可以創建一個自定義類這樣的：

App.CrossfadeView = { 
    didInsertElement: function(){ 
    //called on creation 
    this.$().hide().fadeIn(400); 
    }, 
    willDestroyElement: function(){ 
    //called on destruction 
    this.$().slideDown(250); 
    } 
};

然後在你的代碼，你把它在你不同的視圖類。由於Ember依賴於jQuery，你可以使用幾乎所有的jQuery動畫。

App.IndexView = Ember.View.extend(App.CrossfadeView); 
App.PostView = Ember.View.extend(App.CrossfadeView);

來源

2013-07-05 09:41:56

第一個代碼片段的結尾是錯誤的，括號不匹配:)也許你可以編輯它。 – graup

willDestroyElement動畫不適用於我（1.0-rc4）。看起來這個視圖在動畫呈現之前就已經消失了。你有沒有工作的例子？ – graup

這是一個使用它的（未完成的）例子。動畫工作tho：http://jsbin.com/imahog/21/edit 請注意，我正在使用rc6壽，你是正確的方括號（固定它上面）。 –

在我的應用程序中出現這種相同的要求。試過Ember Animated Outlet，但沒有給出我需要的粒度（元素特定的動畫）。

爲我工作的解決辦法是如下 -

變化linkTo是一個行動

{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}

變爲...

<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>

創建方法fo中的R電流控制器goToTodos

App.IndexController = Ember.Controller.extend({ 
    goToTodos: function(){ 

     // Get Current 'this' (for lack of a better solution, as it's late) 
      var holdThis = this; 

     // Do Element Specific Animation Here 
      $('#something').hide(500, function(){ 

       // Transition to New Template 
        holdThis.transitionToRoute('todos'); 

      }); 

    } 
});

最後 - 要在動畫上託多斯模板元素，在視圖中使用didInsertElement

App.TodosView = Ember.View.extend({ 
    didInsertElement: function(){ 

     // Hide Everything 
      this.$().hide(); 

     // Do Element Specific Animations Here 
      $('#something_else').fadeIn(500); 

    } 
});

到目前爲止，這是最完美的解決方案我我們發現了過渡時元素特定的動畫。如果有什麼更好的，會喜歡聽！

來源

2013-07-10 07:32:34

如果您正在爲單個元素設置動畫，您不是在談論狀態轉換。 ember-animated-OUTLET用於網點，據稱與OP的用例不同。此外，操作會破壞應用程序對URL的支持:-( – mpowered

我發現，實現了瀏覽動畫另一插入式解決方案：ember-animate

例子：

App.ExampleView = Ember.View.extend({ 

    willAnimateIn : function() { 
     this.$().css("opacity", 0); 
    }, 

    animateIn : function (done) { 
     this.$().fadeTo(500, 1, done); 
    }, 

    animateOut : function (done) { 
     this.$().fadeTo(500, 0, done); 
    } 
}

演示：author's personal website

來源

2014-02-06 09:35:46

我知道這是很老，但最好今天針對這種情境特定動畫的解決方案可能是ember liquid fire。

它允許你做這樣的事情在一個過渡文件：

export default function(){ 
    this.transition(
    this.fromRoute('people.index'), 
    this.toRoute('people.detail'), 
    this.use('toLeft'), 
    this.reverse('toRight') 
); 
};

來源

2015-03-10 20:42:44 max

鑑於EmberJS在升級過程中如何真正起伏不定，所以任何關於舊帖子的新信息都應該受到歡迎，所以非常感謝！ – JakeGould

液體火災當前鏈接：https： //github.com/ember-animation/liquid-fire – Kelsin

感謝@Kelsin，已更新爲鏈接 – max

Ember.js路由器：如何動態化狀態轉換

回答

相關問題