如何讓UI路由器在顯示新狀態之前等待動畫完成？

Question

在此示例中，單擊route2將導致「bar」淡入同時「foo」淡出。「foo」淡出後，如何讓「bar」在後消失？

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

我用例：我有2名全屏的網頁，我想這樣做之間的淡入淡出過渡。我不希望兩個全屏頁面同時顯示。謝謝！

這是動畫的CSS：

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/ 
.well[ui-view]{ 
height: 65px; 
} 

.ui-view-container { 
    position: relative; 
} 

[ui-view].ng-enter, [ui-view].ng-leave { 
    position: absolute; 
    left: 0; 
    right: 0; 
    -webkit-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    transition:all .5s ease-in-out; 
} 

[ui-view].ng-enter { 
    opacity: 0; 
    -webkit-transform:scale3d(0.5, 0.5, 0.5); 
    -moz-transform:scale3d(0.5, 0.5, 0.5); 
    transform:scale3d(0.5, 0.5, 0.5); 
} 

[ui-view].ng-enter-active { 
    opacity: 1; 
    -webkit-transform:scale3d(1, 1, 1); 
    -moz-transform:scale3d(1, 1, 1); 
    transform:scale3d(1, 1, 1); 
} 

[ui-view].ng-leave { 
    opacity: 1; 
    /*padding-left: 0px;*/ 
    -webkit-transform:translate3d(0, 0, 0); 
    -moz-transform:translate3d(0, 0, 0); 
    transform:translate3d(0, 0, 0); 
} 

[ui-view].ng-leave-active { 
    opacity: 0; 
    /*padding-left: 100px;*/ 
    -webkit-transform:translate3d(100px, 0, 0); 
    -moz-transform:translate3d(100px, 0, 0); 
    transform:translate3d(100px, 0, 0); 
} 

Answer 1

這行代碼添加到[UI-視圖]在CSS .ng輸入：

transition-delay: 0.5s;