Question

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

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

我的ui-view使用animate.css在屏幕内外反弹的位置。我的问题是，在动画期间，我得到两个<div ui-view>的实例，将第一个实例推倒。我可以找到的所有示例都可以使用position: absolute来解决这个问题，但由于我事先并不知道ui-view的高度而有{{1}在我需要显示的<footer>下面，我无法使用它。

这是我想要动画的工作方式，除了<div ui-view>需要在下面内容

http://jsfiddle.net/9rjrdd1q/

如何在没有<footer>的情况下实现这一目标？或者至少，让我的position: absolute显示...

Answer 1

对于任何有兴趣的人，我只是使用一个指令来解决方法，该指令在每次状态更改时将父容器的大小调整为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

Answer 2

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

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

但离开的div会立即隐藏起来：

检查DEMO

动画ui-view无位置：绝对

2 个答案: