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

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