angular ng-view: show after hidden

Question

Я использую ng-animate и ng-view для сексуального шоу/скрытия контента. Это работа, но я пытаюсь показать второе содержимое после того, как первый контент уже скрыт, и я не могу понять, как это сделать. Я буду рад получить помощь. Мой HTML:

<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; 
} 

Answer 1

вам нужно будет использовать некоторые 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); 

Что-то вроде этого;)