What is the best method for animating a display table to none or reducing its height to

Question

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work.

The desired effect is to make the white div with the class .top disappear when the class collapseTest is added to the header. The issue arises because I am using display: table instead of display: block, which prevents me from simply hiding the content with the CSS rule display: none.

I have created an animation that seems to work well with display: block, but not with table.

@-webkit-keyframes pushDown {
    0% {
        height: 50%;
        display: table;
    }
    100% {
        height: 0;
        display: none;
    }
}

I am calling this animation on the div with the class top:

#header.collapse .top {
    -webkit-animation: pushDown 2s forwards linear;
}

Unfortunately, this approach is not producing the desired result. Can anyone pinpoint what I might be doing wrong? Why isn't the div with the class top animating to be hidden?

javascript css animation

Answer 1

Answer №1

To style #header .top and its children, you can use the following CSS:

#header.collapseTest .top {
    height: 0;
    opacity: 0;
    margin-top: -20px;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

#header.collapseTest .top * {
    opacity: 0;
    height: 0;    
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

I had some difficulty parsing the CSS in your fiddle due to unnecessary code. However, I made the necessary changes in a new fiddle for reference: http://jsfiddle.net/pbukcne4/

Answer 2

To style #header .top and its children, you can use the following CSS:

#header.collapseTest .top {
    height: 0;
    opacity: 0;
    margin-top: -20px;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

#header.collapseTest .top * {
    opacity: 0;
    height: 0;    
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

I had some difficulty parsing the CSS in your fiddle due to unnecessary code. However, I made the necessary changes in a new fiddle for reference: http://jsfiddle.net/pbukcne4/

What is the best method for animating a display table to none or reducing its height to

Answer №1

Similar questions

Why is this text appearing twice on my screen?

Obtain the value or values of radio buttons based on certain conditions

How can I retrieve the value of a <span> element for a MySQL star rating system?

The Asp.net MVC Navigation Bar

Tips for effectively utilizing CSS classes with current-device

403 Error Code - Access Denied when trying to access Cowin Setu APIs

Is it possible to implement the splice() method within a forEach loop in Vue for mutation

Clicking on the checkbox will trigger an AJAX request to cache the

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

What is the best method to include spacing between strings in an array and then combine them into a csv-friendly format?

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

Switching the background image dynamically in Vue.js upon page access

What are the steps involved in converting a MERN application into a desktop application?

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

Implementing restriction measures for deterring harmful conduct within ExpressJS

Unable to locate module - relative file path

The process of isolating each variable within a JSON data structure

How to iterate through two arrays using AngularJS ng-repeat