Creating dynamic animations for ui-view elements without relying on the position:

Question

Creating dynamic animations for ui-view elements without relying on the position:

In my Angular application, I have set up the following structure:

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

My ui-view utilizes animate.css for bouncing in and out of the screen. The issue I am facing is that during animation, two instances of <div ui-view> are stacked on top of each other, causing the first instance to be pushed down. Most solutions recommend using position: absolute, but since the height of ui-view is unknown beforehand and there is a <footer> below <div ui-view> that needs to be displayed, this approach cannot be used.

I want the animation to function as intended, with the <footer> appearing below the content:

http://jsfiddle.net/9rjrdd1q/

Is there a way to achieve this without relying on position: absolute? Alternatively, how can I make sure that my <footer> displays properly?

html css angularjs angular-ui-router animate.css

Answer 1

Answer №1

In case you're curious, I came up with a solution using a directive that adjusts the height of the parent container to match the ui-view every time the state changes:

myApp.directive("adjustParentHeight", ["$document", "$window", function($document, $window) {
    return {
        restrict: "A",
        link: function($scope, element) {
            // Flag to track if the directive has loaded previously
            var hasLoaded;
            // DOM representation of the Angular element
            var domElement = element[0];
            $scope.$on("$stateChangeSuccess", function() {
                console.log(domElement);
                // Retrieve the computed height of the ui-view and set it as the directive element's height
                domElement.style.height = $window.getComputedStyle($document[0].querySelector("[ui-view]")).height;
             
                // Add a class after the first height change to enable animations going forward
                if(!hasLoaded) {
                    domElement.classList.add("auto-height");
                    hasLoaded = true;
                }
            });
        }
    };
}]);

Additionally, I included an animation for the content-wrapper's height so that it smoothly adjusts along with the bounce effect:

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

Check out the Updated Fiddle

Answer 2

In case you're curious, I came up with a solution using a directive that adjusts the height of the parent container to match the ui-view every time the state changes:

myApp.directive("adjustParentHeight", ["$document", "$window", function($document, $window) {
    return {
        restrict: "A",
        link: function($scope, element) {
            // Flag to track if the directive has loaded previously
            var hasLoaded;
            // DOM representation of the Angular element
            var domElement = element[0];
            $scope.$on("$stateChangeSuccess", function() {
                console.log(domElement);
                // Retrieve the computed height of the ui-view and set it as the directive element's height
                domElement.style.height = $window.getComputedStyle($document[0].querySelector("[ui-view]")).height;
             
                // Add a class after the first height change to enable animations going forward
                if(!hasLoaded) {
                    domElement.classList.add("auto-height");
                    hasLoaded = true;
                }
            });
        }
    };
}]);

Additionally, I included an animation for the content-wrapper's height so that it smoothly adjusts along with the bounce effect:

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

Check out the Updated Fiddle

Answer 3

Answer №2

One potential solution is to eliminate position:absolute and instead use the following CSS code:

[ui-view].ng-leave {
    display:none;
   -webkit-animation: fadeOutDown 1s;
}

Keep in mind that the disappearing element will be hidden right away:

View the DEMO

Answer 4

One potential solution is to eliminate position:absolute and instead use the following CSS code:

[ui-view].ng-leave {
    display:none;
   -webkit-animation: fadeOutDown 1s;
}

Keep in mind that the disappearing element will be hidden right away:

View the DEMO

Creating dynamic animations for ui-view elements without relying on the position:

Answer №1

Answer №2

Similar questions

"Trouble with AngularJS Array Loading: View doesn't show data upon load, but alerts and console

Exploring Angular 4: A deep dive into routing and ensuring responsiveness

Leveraging React.memo alongside hooks for managing controlled input components

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

Experiencing excessive delay in loading data into the DOM following a successful response from a service in AngularJS

What is the best method to determine when 20% of a "<section>" element is within the user's view?

Implementing ngClass with a dynamic ID in the URL condition

Interactive vertical table headers and clickable cells

Using Angular to iterate over JSON fields containing hyphens

Is there a way to lower the position of the main image slightly?

The audio.play() HTML element fails to function in Chrome, preventing the audio from playing

Error encountered during login with Facebook on Cordova: "Unable to create module facebookApp because of..."

Exploring the wonders of CSS with Socialchef

How to retrieve values from checkboxes generated dynamically in php using jquery

What is the process for modifying a field type in Netsuite?

How can you create a table cell that is only partially editable while still allowing inline JavaScript functions to work?

Integrating foundation-sites with webpack, unable to apply styles

django problem with bootstrap modal

Nuxt: Issue with Head function affecting title and meta tags

Submitting JSON data using AngularJS.POST