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

问题描述

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

<部分><div ui-view></div></节><页脚>

我的 ui-view 使用 animate.css 的地方弹入和弹出屏幕.我的问题是，在动画过程中，我得到了两个 <div ui-view> 的实例，将第一个实例向下推.我可以找到的所有示例都通过使用 position: absolute 来解决这个问题，但是因为我事先不知道 ui-view 的高度 和 在我的

下面有一个

我需要显示，我不能使用它.

这是我希望动画工作的方式，除了

需要出现在下面内容:

http://jsfiddle.net/9rjrdd1q/

如果没有 position: absolute 我怎么能做到这一点?或者至少，让我的

显示...

解决方案

对于任何感兴趣的人，我只是使用了一个指令来解决方案，该指令将父容器的大小调整为 ui-view 的高度状态改变的时间:

myApp.directive("fixPositionAbsolute", ["$document", "$window", function($document, $window) {返回 {限制:A"，链接:函数($scope，元素){//判断指令之前是否加载过的标志变量已加载；//Angular 元素的 DOM 表示var domElement = element[0];$scope.$on("$stateChangeSuccess", function() {控制台日志(domElement)；//获取 ui-view 的计算高度并将其分配给指令元素domElement.style.height = $window.getComputedStyle($document[0].querySelector("[ui-view]")).height;//第一次高度改变后，添加一个类以从现在开始启用动画如果(！hasLoaded){domElement.classList.add("自动高度");hasLoaded = true;}});}};}]);

然后为 content-wrapper 的高度添加一个动画，以便它随着反弹动画移动:

#content-wrapper.auto-height {高度:0；过渡:高度 0.6s 缓入缓出；}

更新小提琴

I have the following structure in my Angular app:

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

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.

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

http://jsfiddle.net/9rjrdd1q/

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

解决方案

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

Then added an animation for the content-wrapper's height so that it moves along with the bounce animation:

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

Updated Fiddle

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