角度ng-view：隱藏後顯示

我使用ng-animate和ng-view來顯示/隱藏內容。這是工作，但我試圖在第一個內容已經隱藏後顯示第二個內容，我不明白這是如何做到的。我很樂意獲得幫助。我的HTML：角度ng-view：隱藏後顯示

<div ui-view='' ng-view='' class="fade"> ... </div>

而且我對褪色類CSS：

.fade { 
    opacity: 1; 
    transition: all 1s ease; 
} 
.fade.ng-enter, 
.fade.ng-leave { 
} 
.fade.ng-enter { 
    opacity: 0; 
} 
.fade.ng-enter-active { 
    opacity: 1; 
} 
.fade.ng-leave { 
    opacity: 1; 
} 
.fade.ng-leave-active { 
    opacity: 0; 
}

來源

2015-04-24 Mikhail

，你需要在這裏使用一些JavaScript。在動畫結束後有一個回調被觸發，你只需要在第二秒之後完成。所以首先添加此代碼來處理動畫，所有的瀏覽器（不同的網頁渲染引擎）

var pfx = ["webkit", "moz", "MS", "o", ""]; 

prefixedEvent = function (element, type, callback) { 
    for (var p = 0; p < pfx.length; p++) { 
     if (!pfx[p]) type = type.toLowerCase(); 
     element.addEventListener(pfx[p]+type, callback, false); 
    } 
    } 

    removePrefixedEvent = function (element, type, callback) { 
    for (var p = 0; p < pfx.length; p++) { 
     if (!pfx[p]) type = type.toLowerCase(); 
     element.removeEventListener(pfx[p]+type, callback, false); 
    } 
    } 
    transitionEnded = function(elementToAnimate){ 
    removePrefixedEvent(elementToAnimate.srcElement, "TransitionEnd", transitionEnded); 
    //do the new animation here eg: newElement.style.opacity = 1; 
    }

然後當你做的第一個動畫：

var elementToAnimate = document.getElementsByClass("fade")[0]; 
prefixedEvent(elementToAnimate, "TransitionEnd", transitionEnded);

像這樣的東西;）

來源

2015-04-24 12:18:06 goncalofalcao

角度ng-view：隱藏後顯示

回答

相關問題