动画 ui-view 没有 position:absolute

Question

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

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

我的 ui-view 使用 animate.css 进出屏幕。我的问题是，在动画期间，我得到两个 <div ui-view> 的实例，将第一个实例向下推。我能找到的所有示例都通过使用 position: absolute 来解决这个问题，但是因为我事先不知道 ui-view 的高度和有一个 <footer> 在我需要显示的 <div ui-view> 下面，我不能使用这个。

这是我希望动画工作的方式，除了 <footer> 需要出现在下方内容：

http://jsfiddle.net/9rjrdd1q/

如果没有 position: absolute，我该如何实现？或者至少，让我的 <footer> 显示...

Answer 1

也许您可以删除 position:absolute 并应用此 css 规则：

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

但是离开的 div 会立即隐藏:

勾选DEMO

Answer 2

对于任何感兴趣的人，我只是使用一个指令做了一个变通方法，每次状态改变时，该指令将父容器的大小调整为 ui-view 的高度：

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 的高度添加动画，使其移动以及弹跳动画：

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

Updated Fiddle

动画 ui-view 没有 position:absolute

Animating ui-view without position:absolute

html

css

angularjs

animate.css

angular-ui-router