Angular UI路由器：UI狀態變化的定位

我目前正在爲代理機構開發一個重角度驅動的主頁。現在我處於狀態轉變。我添加了一個簡單的淡入淡出效果的頁面轉換。現在我遇到的問題是，狀態更改時添加的新ui-view在第一個ui-view之前被添加。一切都好，但隨着第一個ui視圖淡出，第二個視圖已經添加，轉換看起來很蹩腳。所以，我想在第一個UI視圖之後添加新的UI視圖。Angular UI路由器：UI狀態變化的定位

重要提示：我使用視差效果，因此無法使用頁面容器和絕對定位。

Before ui-view change

此圖片顯示我想以後有什麼。

After ui-view change

來源

2015-01-01 Nick Schmidt

在這種情況下'ng-animate'是不夠的嗎？（https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate）新視圖插入的位置是非常硬編碼到'ui-view'的代碼中：https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js#L191 –

我正在使用'ng-animate'。否則，它不可能有過渡，是嗎？ –

嗯......是的，可以在不使用'ng-animate'的情況下使用JavaScript應用CSS轉換。看到你_did not_指定你正在使用'ng-animate'我以爲你不是_。 'ng-view'幾乎是硬編碼的，以便在DOM中插入新視圖_現有的視圖。所以你的問題在於轉換的CSS規則。你也沒有向我們展示這些。 –

我曾面臨類似的問題，那是因爲我有動畫上都進入和離開。

你不需要進入和離開的動畫。只有在請假時或只有輸入時，纔可以播放動畫

例如，

.ng-enter { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
    opacity: 0; 
}

結賬的寬鬆政策在動畫這個PLUNKER

或者如果你想動畫在進入和離開，然後在動畫

增加延遲增加延遲，你的轉換：

.ng-enter{ 
    -webkit-transition: all 2s ease 1s; 
    -moz-transition: all 2s ease 1s; 
    -o-transition: all 2s ease 1s; 
    transition: all 2s ease 1s; 
} 

.ng-leave { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
}

來源

2015-01-01 19:01:57 harishr

我正在這裏拖延。 –

你可以創建一個問題的重點？ – harishr

@哈里斯的回答：

http://plnkr.co/edit/pzsDd1zPvHgdZe099upi?p=preview

我們有2個轉變：

IN：

.ng-enter { 
    transition: opacity 1s ease; // autoprefixer 
    opacity: 0; // start animating 
} 
.ng-enter-active { 
    opacity: 1; // end animating 
}

OUT：

.ng-exit { 
    transition: opacity 1s ease; // autoprefixer 
    opacity: 1; // start animating 
} 
.ng-exit-active { 
    opacity: 0; // end animating 
}

這將需要1秒淡入淡出塊。當只有1塊時，它立即消失1秒。如果有兩個街區（從一個街區到另一個街區？）會怎麼樣？我們可以用延遲和一些漂亮的CSS：

// Selector only matches if 2 sibling animating elements exist 
.ng-animate + .ng-animate { 
    // Avoid pushing around DOM 
    // Property disappears once the first sibling leaves 
    position:absolute; 
    // Delay fade-in until first sibling leaves 
    transition-delay: 1s; // autoprefixer 
}

沒有這個奇特選擇，你打開一看你第一次就會有一個1秒的延遲發生任何事情之前。

來源

2015-01-05 02:50:03 ProLoser

Angular UI路由器：UI狀態變化的定位

回答

相關問題