trying to animate height increase

[gib65]

Hello,

I'm trying to animate a div growing in height with CSS transitions. It's not working.

Here's what I've got:

At first, you have a textbox and a drop down list with an invisible div of height 0 underneath (see the attached screen screen shot: before.jpg).

5789

Here's the html and the css:

<div id="VehicleFeaturesDiv" class="VehicleFeaturesHide"></div>

.VehicleFeaturesHide
{
display: none;
height: 0;
}

Then when the user selects an item from the list, some javascript runs and swaps out the VehicleFeaturesHide for VehicleFeaturesShow (see the attached screen shot: after.jpg):

5790

The css looks like this:

.VehicleFeaturesShow
{
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 15px 0;
border: 3px #00447c solid;
border-radius: 7px;
width: 600px;

-webkit-transition: height 5s;
-moz-transition: height 5s;
-ms-transition: height 5s;
-o-transition: height 5s;
transition: height 5s;
}

The javascript then populates the div with a whole bunch of content, causing the height to increase with each content item:

$("#VehicleFeaturesDiv").removeClass("VehicleFeaturesHide");
$("#VehicleFeaturesDiv").addClass("VehicleFeaturesShow");

PopulateVehicleFeatures(data);

PopulateOptionFeatures(data);

SetDefaulCheckboxtStates(data);

_totalPrice = CalculateTotalPrice(data);

CreatePlaceOrderAndPriceDiv(_totalPrice);

WireCheckboxesToEventHandler();

The idea I have--and I'm probably wrong here--is that if I swap the hidden class for the show class, and the add content to the div (like I'm doing in the javascript) that will increase the height, and since we have height transition CSS in the show class, that increase in height should animate. No?

In any case, it's not working. Please help.

[Beverleyh]

Looks like you're trying to intimate to height:auto; - sadly that won't work. You would need to define an explicit height to animate to.

A CSS workaround would be to transition max-height instead http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

[gib65]

Well, I switched to using max-height, cleaned up my code, and now it looks like this:

Javascript:


PopulateVehicleFeatures(data);

PopulateOptionFeatures(data);

SetDefaultCheckboxtStates(data);

_totalPrice = CalculateTotalPrice(data);

CreatePlaceOrderAndPriceDiv(_totalPrice);

WireCheckboxesToEventHandler();

$("#VehicleFeaturesDiv").removeClass("VehicleFeaturesHide");
$("#VehicleFeaturesDiv").addClass("VehicleFeaturesShow");


CSS:


.VehicleFeaturesHide
{
display: none;
max-height: 0;
}

.VehicleFeaturesShow
{
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 15px 0;
border: 3px #00447c solid;
border-radius: 7px;
width: 600px;

-webkit-transition: max-height 5s ease-in;
-moz-transition: max-height 5s ease-in;
-ms-transition: max-height 5s ease-in;
-o-transition: max-height 5s ease-in;
transition: max-height 5s ease-in;

max-height: 1000px;
}


HTML:


<div id="VehicleFeaturesDiv" class="VehicleFeaturesHide"></div>


But it's still no go.

Note that I moved the

$("#VehicleFeaturesDiv").removeClass("VehicleFeaturesHide");
$("#VehicleFeaturesDiv").addClass("VehicleFeaturesShow");

to the end of the steps in the javascript. I'm thinking that if I leave the div hidden with max-height=0 as I'm adding content, and then add the class to animate it, it will be forced to increase its height because all the content is already there and it should animate. But this is still not happening.

I'm wondering if the way I'm adding the VehicleFeaturesShow class at run time is an issue. I know that I've had issues with .addClass() and .removeClass() before. All the examples of height animation I've googled use a hover effect which can be done in CSS (no adding or removing classes in javascript). Have you ever experienced issues similar to this with these?

[Beverleyh]

Sorry no - I haven't had issues with adding or removing classes with JavaScript in order to trigger CSS3 animations.

If you provide a link to a working demo maybe somebody can take a look. If you can't link to a page on your own server, build up a reduced demo in JSBin, JSFiddle or CodePen instead.

[gib65]

Sorry no - I haven't had issues with adding or removing classes with JavaScript in order to trigger CSS3 animations.

If you provide a link to a working demo maybe somebody can take a look. If you can't link to a page on your own server, build up a reduced demo in JSBin, JSFiddle or CodePen instead.

Happily, this is one of the rare occasions when I can post a demo on my server.

Check it out here: http://www.shahspace.com

What I currently have up there is using a different technique than the CSS animation. I gave up on the latter when I discovered that you can do animations with JQuery. So if you select "Ford F150 XL" from the drop down, you'll see the div appearing and expanding in height. The JQuery code to accomplish that is this:

$("#VehicleFeaturesDiv").css("display", "flex");
$("#VehicleFeaturesDiv").animate({
maxHeight: 10000,
}, 2000, function () { });

This works fine.

The problem I'm having now is this: if you then select the "Please select a vehicle..." option, the animation should work in the opposition direction--the div should collapse and then disappear. I have it disabled now so that it just disappears immediately, but when I was trying to get it to work, I had this jquery code which took up to 2 to 3 seconds before it would run:

$("#VehicleFeaturesDiv").animate({
maxHeight: 0
}, 2000, function () {
$("#VehicleFeaturesDiv").css("display", "none");
$("#VehicleFeaturesDiv").html("");
});

That is, if the user selected "Please select a vehicle..." nothing would happen for a good 2 to 3 seconds, and THEN the animation would occur.

So that's where I'm at right now. Not sure if any of that helps, but I do appreciate whatever help you can give me. Thanks.