Re: [css-d] Help with CSS3 transitions?

[David Hucklesby]

On 7/20/12 12:24 PM, Kyle Sessions wrote:

Hi everyone,

I was hoping someone could give me a hand with the CSS3 transition
property. I've set up a very simple test page here:

http://kage23.com/transition-test.html

When you first load the page, you should see a  with four visible
items, and a "More" link. There's also another  with a few
additional items, that is hidden when you first load the page (height:
0px; overflow: hidden;). When you click the "More" link, I'm using
Javascript/YUI to add a class to the hidden , that gives it height:
auto; instead of height: 0px;. I have applied the transition property
[...]


Transitions only work from one specific value to another. "Auto" won't work,
as you discovered.

Try deleting the "height" properties, and use "max-height" instead. Make
sure the max-height on the ".open" state is big enough for any future number
of list items in the submenu. I'd use "em"s for this.
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Help with CSS3 transitions?

[Kyle Sessions]

Hi everyone,

I was hoping someone could give me a hand with the CSS3 transition
property. I've set up a very simple test page here:

http://kage23.com/transition-test.html

When you first load the page, you should see a  with four visible
items, and a "More" link. There's also another  with a few additional
items, that is hidden when you first load the page (height: 0px; overflow:
hidden;). When you click the "More" link, I'm using Javascript/YUI to add a
class to the hidden , that gives it height: auto; instead of height:
0px;. I have applied the transition property (along with all the
vendor-prefixed transition properties) to my hidden , so when you click
the link, it should take a second for the hidden stuff to "slide" down and
become visible. However, for whatever reason, the transition is not being
applied, and the hidden stuff is instantly visible upon clicking "More".
This lack of transition is happening in all the browsers I care about, and
I have no idea what I'm doing wrong. Any thoughts?

Thanks in advance!

Best,
Kyle

-- 
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com

510-665-1200 + 128

www.bepress.com

bepress: the frontier of scholarly publishing since 1999

Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/