使用 ng-view 和 UI Bootstrap 的 AngularJS 动画

Question

我有一个相当不寻常的情况，我正在使用 UI Bootstrap 中的选项卡，并且希望在单击每个选项卡时淡出/淡入动画。不同寻常的是，选项卡内容并非全部包含在同一页面上，而是单独的视图。我真的只是追求标签的视觉效果，我想我可以通过其他方式获得，但你去吧。示例视图如下所示：

<div>
    <tabset>
        <tab heading="Enquiries" select="enquiriesSelected()"></tab>
        <tab heading="Airlines" select="airlinesSelected()"></tab>
        <tab heading="Aircraft" select="aircraftSelected()"></tab>
        <tab heading="Airports" select="airportsSelected()"></tab>
        <tab heading="Customers" active="true">
            <!-- tab content, other tab contents are empty -->
        </tab>
    </tabset>
</div>

我的控制器行为如下所示：

$scope.enquiriesSelected = function() {
    $location.path("/enquiries");
};

我的 CSS 看起来像这样：

.view-fade.ng-enter {
  transition: all 1s ease;
  -webkit-transition:all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
}

.view-fade.ng-enter {
  opacity: 0;
}

.view-fade.ng-enter.ng-enter-active {
  opacity: 1;
}

.view-fade.ng-leave.ng-leave-active {
  opacity:1;
}

.view-fade.ng-leave{
  opacity:0;
}

最后，我的类在 HTML 中是这样应用的：

<div ng-view class="view-fade container" />

这一切都按预期工作，除了一件事。单击选项卡标题时，当前选项卡及其内容在新选项卡逐渐淡入之前完全消失。我希望当前选项卡淡出，以便选项卡标题本身永远不会从视图中消失，如果你明白我的意思！

这可能吗？我希望这是一个摆弄 css 的工作，而不是任何功能更改，但这是我第一个使用动画的 AngularJS 项目，我有点卡住了。

提前致谢。

Answer 1

找到了解决办法。一些糟糕的 CSS。这是工作版本：

.view-fade.ng-enter, .view-fade.ng-leave {
    transition: all 1s ease;
    -webkit-transition:all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.view-fade.ng-enter {
    opacity: 0;
}
.view-fade.ng-enter.ng-enter-active {
    opacity: 1;
}
.view-fade.ng-leave.ng-leave-active {
    opacity:0;
}
.view-fade.ng-leave {
    opacity:1;
}

现在我有一个（稍微）另一个问题，即内容显示在下方，然后在动画结束时向上跳。我想我可以解决这个问题。

更新

我解决了跳跃问题。需要添加这个 CSS：

.view-fade {
    position: absolute;
    width: 100%;
}

兔子现在快乐！