Out of position ui-view animation: absolute
I have the following structure in my Angular app:
<header></header>
<section>
<div ui-view></div>
</section>
<footer>
Where mine is ui-view
using animate.css to bounce and exit the screen. My problem is that during animation I get two instances <div ui-view>
on top of each other by pushing the first instance down. All examples I can find work around this with position: absolute
, but since I don't know what the height is ui-view
in advance and has <footer>
below mine <div ui-view>
which I need to display, I cannot use that.
This is how I want the animation to work, except for what <footer>
should appear below the content:
How can I achieve this without position: absolute
? Or at least get mine <footer>
to display ...
source to share
For anyone interested, I just did a workaround by using a directive that resizes the parent container to its height ui-view
on every state change:
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 we added animation for the height content-wrapper
so that it moves with the bounce animation:
#content-wrapper.auto-height {
height: 0;
transition: height 0.6s ease-in-out;
}
source to share