淡出元素完全褪色另一個

我想淡出元素和淡入另一個採用了棱角分明的動畫。

衰落（使用不透明度和轉換）起作用。但是，如您所見，它會在隱藏當前顯示的元素之前顯示先前隱藏的元素。這會讓你同時顯示兩個元素。

問題

有沒有辦法等到第一個元素表示第二元素之前被完全隱藏？很確定我可以用一個自定義指令來做到這一點，但在走下那條路線之前，我想確保沒有開箱即用的方式。

我已經試過

一）把元素的過渡，延遲正在消退：

.ng-hide-remove { 
    -webkit-transition: all 1s ease 1s; 
    transition: all 1s ease 1s; 
    opacity: 0; 
}

b）利用height屬性

這不會爲我工作，因爲我隱藏在我的應用程序中的div是網格系統的一部分。

注意

如果我在jQuery來實現這一點，它會是：

elementToFadeOut.fadeOut(1000, function() { 

    elementToFadeIn.fadeIn(1000); 

});

2014-02-18 Rob Campo

我可以使用此規則暗示的最好的事情：'.ng隱藏去除的活性{ 的位置是：絕對的; }'（[jsFiddle]（http://jsfiddle.net/rsyVL/））。但這不完全是你所需要的... – Curious

謝謝@Zub。 Yeh，很好的解決方案，儘管它確實會使頁面跳躍一點（例如，如果內容在下面），這不是理想的。我會發佈一個自定義指令的解決方案，當我有機會的時候這樣做。 –

有關純CSS解決方案，請參見[angularjs-chained-fade-in-fade-out-transition]（http://stackoverflow.com/a/24751641/1612562）。 – rphv

修正：

ZUB的建議下

二手一部分，但也動態設置容器div的高度，以便在過渡時不閃爍。

爲了達到這個目的，創建了一個指令並添加到每個相應的衰落元素（那些帶有ng-show的元素）。該指令將其元素的高度與父元素的高度進行比較。如果父具有較低的高度，它更新的父（這可防止閃爍）：

if (height > parentHeight) { 
    $(element).parent().height(height); 
}

爲了確保不是所有的NG-顯示/隱藏淡入/淡出，一個指令animateFade兼作CSS類，它是應用到衰落的動畫：

.animate-fade.ng-hide-add { 
    -webkit-transition: all 1s ease; 
    transition: all 1s ease; 
    opacity: 1; 
}

2014-02-27 14:41:10

回答