On 7/23/12 11:25 AM, Kyle Sessions wrote:
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
Cool!
But I hope you don't anticipate having more than a dozen sub-items, though.
The bottom items might not be visible in that case. YMMV of course.
--
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/
