On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby <huckle...@gmail.com>wrote:
> 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<http://kage23.com/transition-test.html> >> >> When you first load the page, you should see a <ul> with four visible >> items, and a "More" link. There's also another <ul> 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 <ul>, 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. > Thanks, David! I couldn't use max-height because in the actual production environment that this is intended for, there's no way to predict what the maximum number of additional items is. I did get it working, though. I put the additional items into a containing div, then I measured the height of the additional-items <ul>, and then used Javascript to adjust the height of the containing div, rather than the actual <ul> itself. Throw an overflow:hidden onto the containing div, and it's good to go. http://kage23.com/transition-test.html Best, Kyle > -- > Cordially, > David > > > ______________________________**______________________________**__________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/**mailman/listinfo/css-d<http://www.css-discuss.org/mailman/listinfo/css-d> > List wiki/FAQ -- > http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/> > List policies -- > http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html> > Supported by evolt.org -- > http://www.evolt.org/help_**support_evolt/<http://www.evolt.org/help_support_evolt/> > -- 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/
