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

快乐兔子吧！

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

1 个答案: