我的 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>
需要出现在内容下方:
如果没有position: absolute
,我怎么能做到这一点? ?或者至少,得到我的 <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
的高度添加了一个动画,以便它移动 和弹跳动画:
#content-wrapper.auto-height {
height: 0;
transition: height 0.6s ease-in-out;
}
关于html - 动画 ui-view 没有位置 :absolute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30074558/