2013-08-23 31 views
0

我正在爲我們正在開發的web應用程序構建一個功能。應用程序在AngularJS 1.0.7上運行AngularJS webapp的內容級別之間的動畫

功能如下: 用戶可以非常傳統地瀏覽應用程序,深入到內容級別。一個ng-view,裏面有更多控制器和部分的幾個控制器。

regular state

在內容上的4個第一層次,用戶能夠看到的「路徑」(同麪包屑): Overview opened

這裏是事情變得有趣。當用戶點擊其中一個級別時,該級別將會擴大,並且該級別的內容將會在其中。原來打開的內容會滑落: enter image description here

作爲更好地理解它的參考,請考慮Evernote的移動應用程序。在那裏,您使用相同的機制在處於同一級別的視圖之間切換,因此每個級別都可以由一個父級控制器表示。

然而在我的情況下,所有4個級別都是分層結構。在1級你可以選擇看幾個2級,在2級你可以去幾個不同的3級。

我想看看如何使它成爲可能。我需要在轉換過程中保持先前和新的內容可見。

回答

0

最後,我實現該功能與巧妙地利用虛設元件。

當導航被觸發:

  • 容器元素被複制和替代的實際內容
  • 實際容器移出屏幕
  • 動畫開始轉變啞元關閉屏幕和實際內容區域到它的地方