我使用ng-animate和ng-view进行性感的表演/隐藏内容。 它的工作,但我试图在第一个内容已被隐藏后显示第二个内容,我无法理解这是怎么做的。我很乐意得到帮助。我的HTML:
<div ui-view='' ng-view='' class="fade"> ... </div>
我的fss for fade class:
.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;
}
答案 0 :(得分:0)
你需要在这里使用一些javascript。在动画结束后会触发一个回调,你只需要在第二个之后执行。 因此,首先添加此代码以处理所有浏览器(不同的Web渲染引擎)的动画
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);
像这样;)