如何延遲轉換直到前一個完成。 （ng-show）

Question

我有一系列包含特定部分信息的div標籤。每次只能有一個div塊可見，爲了達到這個目的，我有一個ng-show語句，它以當前設置的名稱爲條件。我的標記看起來與此類似。

.infoBlock { 
 
    transition: all .2s linear; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.infoBlock.ng-hide { 
 
    opacity: 0; 
 
}

<div class="infoBlock" ng-show="selectedCategory == 'name1'"> 
 
    <p> 
 
    ...some text 
 
    </p> 
 

 
</div> 
 

 

 
<div class="infoBlock" ng-show="selectedCategory == 'name2'"> 
 
    <p> 
 
    ...some text 
 
    </p> 
 

 
</div>

的問題是，目前一個有機會消失之前，因爲div的走前面顯示一個地點，一個div是要顯示出現。

我試圖設置在.infoBlock類transition-delay但這並沒有解決這個問題，我不能用setTimeout()每當我設置selectedCategory，因爲它沒有任何作用，因爲同一個變量控制兩個功能塊的外觀。

Answer 1

你可以玩一個把戲與ng-hide-animate和ng-hide-remove-active類：

.infoBlock.ng-hide-remove-active { 
     transition-delay: 0.4s; 
    } 
    .infoBlock.ng-hide-animate { 
     position:absolute; 
    } 

Plunker：http://plnkr.co/edit/w0SIch3yIHuWldyonMLF