在淡入另一个之前完全淡出元素

Question

从这个jsfiddle可以看出：

http://jsfiddle.net/robcampo/pWGuS/

我正在尝试使用Angular动画淡出一个元素并淡化另一个元素。

淡化（使用不透明度和过渡）有效。但是，正如您将看到的，它会在隐藏显示当前元素之前显示先前隐藏的元素。这样就可以同时显示这两个元素。

问题

有没有办法等到第一个元素完全隐藏后再显示第二个元素？我很确定我可以使用自定义指令做到这一点，但在走这条路线之前，我想确定没有开箱即用的方式。

我尝试了什么

a）对正在淡化的元素设置转换延迟：

.ng-hide-remove {
    -webkit-transition: all 1s ease 1s;
    transition: all 1s ease 1s;
    opacity: 0;
}

b）使用高度属性

这对我不起作用，因为我隐藏在我的应用程序中的div是网格系统的一部分。

注意

如果我要在jQuery中实现它，那就是：

elementToFadeOut.fadeOut(1000, function() {

    elementToFadeIn.fadeIn(1000);

});

Answer 1

修正：

http://jsfiddle.net/robcampo/pWGuS/10/

使用Zub建议的一部分，但也动态设置容器div的高度，以便在转换时不会闪烁。

为实现此目的，创建了一个指令并将其添加到每个相应的淡入淡出元素（具有ng-show的元素）中。该指令将其元素的高度与父元素的高度进行比较。如果父级的高度较低，则会更新父级（这可以防止闪烁）：

if (height > parentHeight) {
    $(element).parent().height(height);
}

为了确保不是所有ng-show / hides淡入/淡出，指令animateFade也可以作为应用于淡入淡出动画的CSS类：

.animate-fade.ng-hide-add {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1;
}