Out of position ui-view animation: absolute

I have the following structure in my Angular app:

    <div ui-view></div>


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

2 answers

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() {
                // 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) {
                    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;


Updated script



Maybe you can remove position:absolute

and apply this css rule:

[ui-view].ng-leave {
   -webkit-animation: bounceOutLeft 1s;


But the outgoing div will be hidden immediately:

Check out DEMO



All Articles