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

Question

从这个 jsfiddle 可以看出：

我正在尝试使用 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);

});

score 3 · Accepted Answer

固定的：

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

1 回答 1