html – 没有位置的动画ui-view：绝对

2023年1月6日 253次阅读

我的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/

如何在没有位置的情况下实现这一点：绝对？或者至少,得到我的< footer>显示…

最佳答案 对于任何感兴趣的人,我只是使用一个指令来解决方法,该指令在每次状态更改时将父容器的大小调整为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.auto-height {
    height: 0;
    transition: height 0.6s ease-in-out;
}

Updated Fiddle

点赞