动画ui-view没有位置：绝对 [英] Animating ui-view without position:absolute

问题描述

我在Angular应用程式中有以下结构：

I have the following structure in my Angular app:

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

其中 ui-view href =http://daneden.github.io/animate.css/ =nofollow> animate.css 反弹进出屏幕。我的问题是，在动画期间，我得到两个实例< div ui-view> 在彼此的顶部，推第一个实例。所有的例子我可以找到绕过这个使用 position：absolute ，但由于我不知道 ui-view < div ui-view> 下方有< footer> / code>，我需要显示，我不能使用这个。

Where my ui-view uses animate.css to bounce in and out of the screen. My problem is that during animation I get two instances of <div ui-view> on top of each other, pushing the first instance down. All of the examples I can find get around this by using position: absolute but since I don't know the height of the ui-view in advance and have a <footer> below my <div ui-view> which I need to display, I can't use this.

这是我想要的动画的工作方式，除了< footer> 必须出现在下面内容：

This is the way I want the animation to work, except the <footer> needs to appear below the content:

http://jsfiddle.net/9rjrdd1q/

如何不实现 position：absolute ？或者至少，让我的< footer> 显示...

How can I achieve this without position: absolute? Or at the very least, get my <footer> to display...

推荐答案

对于任何感兴趣的人，我只是使用一个指令，每当状态更改时，将父容器的大小调整到 ui-view / p>

For anyone interested, I just made a workaround using a directive which resizes the parent container to the height of the ui-view every time the state changes:

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

更新小提琴

这篇关于动画ui-view没有位置：绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！