Html 不带位置的ui视图动画：绝对

我的Angular应用程序具有以下结构：

<header></header>
<section>
    <div ui-view></div>
</section>
<footer>

其中my

ui视图

用于在屏幕中来回跳出。我的问题是，在动画过程中，我得到了两个

实例，它们彼此重叠，将第一个实例向下推。我能找到的所有示例都可以通过使用

位置：绝对

绕过这个问题，但由于我事先不知道

ui视图的高度，并且在我需要显示的
下方有一个
，所以我不能使用这个

这是我希望动画的工作方式，除了内容下方需要显示的
：


如果没有
位置：绝对
，我如何实现这一点？或者，至少，让我的
显示…
也许您可以删除
位置：绝对
并应用此css规则：

[ui-view].ng-leave {
    display:none;
   -webkit-animation: bounceOutLeft 1s;
}

但即将离开的部门将立即被隐藏：

检查对于任何感兴趣的人，我只是使用一个指令做了一个变通方法，每当状态改变时，它会将父容器的大小调整到
ui视图的高度：

myApp.directive("fixPositionAbsolute", ["$document", "$window", function($document, $window) {
    return {
        restrict: "A",
        link: function($scope, element) {
            // Flag to determine if the directive has loaded before
            var hasLoaded;
            // DOM representation of the Angular element
            var domElement = element[0];
            $scope.$on("$stateChangeSuccess", function() {
                console.log(domElement);
                // Get the computed height of the ui-view and assign it to the directive element
                domElement.style.height = $window.getComputedStyle($document[0].querySelector("[ui-view]")).height;
                // After the first height change, add a class to enable animations from now on
                if(!hasLoaded) {
                    domElement.classList.add("auto-height");
                    hasLoaded = true;
                }
            });
        }
    };
}]);

然后为
内容包装器的高度添加动画，使其与反弹动画一起移动：

#content-wrapper.auto-height {
    height: 0;
    transition: height 0.6s ease-in-out;
}

如果可能的话，我真的很想让BounceOutletft保持机智