角度 ng-view：隐藏后显示答案

【问题标题】：angular ng-view: show after hidden角度 ng-view：隐藏后显示
【发布时间】：2015-07-03 00:44:26
【问题描述】：

我使用 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;
}

【问题讨论】：

标签： javascript css angularjs ng-animate ng-view

【解决方案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);

类似的东西;)

【讨论】：