Animate / transition height with CSS3, but using jQuery?

Question

I'm trying to make a show/ hide menu button for mobile devices using media queries.

I'm aware that CSS3 on mobile is faster, most of the time, on mobile compared to using jQuery animate because of hardware acceleration, hence I want to use this method.

I need a smooth, 0.5s CSS3 animation from 0px to whatever height the container is.

What I'd like to do - or the logic I'd thought of so far - is when clicking this UI icon, you toggle the height of the .nav>ul from 0px to auto.

I've tried using transition: height and adding a class to the required bit using jQuery, but I cannot figure out how to apply a CSS£ transform / transition to the height and get it to smoothly toggle the height, and I'm now stuck. Don't even know what to Google for (have tried, trust me!).

Here's a working JSFiddle: http://jsfiddle.net/3v47n/ - the small grey 20x20 icon is the trigger.

My jQuery:

$('.nav span').on('click',function(){

    $('.nav ul').addClass('animateHeight')

});

And my CSS:

.nav {
min-height: 60px;
}
.nav ul {
height: 0;
overflow: hidden;
transition: height 0.5s ease;
}
.nav ul.animateHeight {
height: auto;
max-height: 9999px;
}

You cannot transition to :auto; you'll have to use jquery slideUp() slideDown() or set a fixed height in pixels to transition to, or use some kind of tricky trick http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto — Jonas Grumann, Apr 14 '14 at 09:35
Thanks @JonasGrumann I've tried doing that - but it won't work. It's been a long time since I worked with CSS3 animations / transitions so i've no idea if my CSS is even correct. — tjcss, Apr 14 '14 at 10:06

score 2 · Accepted Answer · answered Apr 14 '14 at 11:34

2

Just found a solution for you, maybe not the best solution, but a workaround.

As you can't transition to height: auto you could transition the max-height. But you need to set the target height to a value which is close to height: auto, but always a big bigger.

See here: http://jsfiddle.net/3v47n/5/

.nav ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s ease;
}
.nav ul.animateHeight {
  max-height: 999px;
}

answered Apr 14 '14 at 11:34

haeki

152
1
2
10

1

just a little change put toggleClass in code instead of addClass – Nimmi Apr 14 '14 at 11:45

score 1 · Answer 2 · edited Apr 14 '14 at 10:30

1

Looking at your code this could be your best solution I think, please use this jQuery below in your code:

$('.nav span').on('click',function(){
    if($('.nav ul').hasClass('animateHeight')){
        $('.nav ul').removeClass('animateHeight');
    } else {
        $('.nav ul').addClass('animateHeight');
    }
});

edited Apr 14 '14 at 10:30

David Thomas

249,100
51
377
410

answered Apr 14 '14 at 10:11

Nimmi

1,997
2
12
20

Could you correct that URL for me? I'm only seeing my own JSFiddle. – tjcss Apr 14 '14 at 10:12
I am having few issues with link, pasting JS here you can grab that one. – Nimmi Apr 14 '14 at 10:13
This is absolutely correct for the toggle side of things, but what I'm struggling with is the actually animation with CSS3. How do I get the nav to show using a css3 animation? – tjcss Apr 14 '14 at 10:27
sorry for taking time to respond but you can remove height:auto and CSS animation on max-height – Nimmi Apr 14 '14 at 11:41

Animate / transition height with CSS3, but using jQuery?

2 Answers2