Как отложить переход до предыдущего завершения. (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, который собирается показать появляется перед текущей один имеет шанс исчезнуть.

Я попытался установить transition-delay на .infoBlock классе, но это не решило проблему, и я не могу использовать 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