Re: [css-d] Playing with CSS3 transitions

[David Laakso]

Alan Gresley wrote:
The other is of a drop menu. A browser that does not support 
transition would use the normal method of hiding sub-menus with ap. 
and a browser that supports transitions would use height: 0 and 
height: auto on hover (Just like in your demo).












Nice, Alan.

No big deal.. be aware show-through on the menu first item drop-down.

Mac OS X 10.4
Safari Version 4.1.1
and the current WebKit nightly.

Not checked in Chrome.

Best,
Samuel Morse


--
http://chelseacreekstudio.com/

__
css-discuss [cs...@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/

Re: [css-d] Playing with CSS3 transitions

[Alan Gresley]

Tim Climis wrote:

On Monday, August 23, 2010 6:51:34 pm Tim Climis wrote:


I'm going to play a little more, but then I'll put up some demos.


Okay, so I wrote up what I had at 7:00 this evening.  But what I've gotten 
since then is pretty nifty.  Unfortunately, it's almost 1:00am, so it'll have 
to wait a couple of days for a write-up and a demo page.


But here's effect #1.  http://timclimis.blogspot.com/2010/08/pure-css-dropdown-
menus-with.html

---Tim


Just fixing your link.




At long last I have got a transition to work. Thank you David Laakso 
for that link.


Here I have two demos. One is a gallery which mimics the affects of a 
similar gallery I had seen on YouTube but powered with javascript. The 
other is of a drop menu. A browser that does not support transition 
would use the normal method of hiding sub-menus with ap. and a browser 
that supports transitions would use height: 0 and height: auto on 
hover (Just like in your demo).





--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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/

Re: [css-d] Playing with CSS3 transitions

[Tim Climis]

On Monday, August 23, 2010 6:51:34 pm Tim Climis wrote:

> I'm going to play a little more, but then I'll put up some demos.

Okay, so I wrote up what I had at 7:00 this evening.  But what I've gotten 
since then is pretty nifty.  Unfortunately, it's almost 1:00am, so it'll have 
to wait a couple of days for a write-up and a demo page.

But here's effect #1.  http://timclimis.blogspot.com/2010/08/pure-css-dropdown-
menus-with.html

---Tim
__
css-discuss [cs...@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/

Re: [css-d] Playing with CSS3 transitions

[Tim Climis]

On Monday, August 23, 2010 5:27:35 pm David Laakso wrote:

> min-height?


Well, that resulted in something interesting...

Here's the code I used.

li.parent ul {
/* irrelavant code snipped */
height: 0;
-webkit-transition: all .3s ease-in;
}

li.parent:hover ul {
min-height: 4em;
height: auto;
}

The result was that on hover, the menu appears with a fade-in (even without 
specifying opacity - not what I expected) and then, on unhover, it fades back 
out AND wipes up.  On slowing it down, it immediately shrinks to 4em, and then 
wipes up from there.  But at the .3 seconds, you can't tell that, and it looks 
pretty good.

I'm going to play a little more, but then I'll put up some demos.

---Tim



__
css-discuss [cs...@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/

Re: [css-d] Playing with CSS3 transitions

[David Laakso]

Climis, Tim wrote:

Promising, I think...

Near the bottom of the page he has a fairly recent example of a CSS3
transition slide-down...




That's pretty much the effect I'm going for (sans the opacity transition).  But 
a quick look at that code, and it's setting the height on that to 30px.  And we 
all know how flexible that is...  Perhaps that's the only way to do it though.

---Tim

  





min-height?

~d


--
:: desktop and mobile ::
http://chelseacreekstudio.com/

__
css-discuss [cs...@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/

Re: [css-d] Playing with CSS3 transitions

[Climis, Tim]

> Promising, I think...
> 
> Near the bottom of the page he has a fairly recent example of a CSS3
> transition slide-down...
> 

That's pretty much the effect I'm going for (sans the opacity transition).  But 
a quick look at that code, and it's setting the height on that to 30px.  And we 
all know how flexible that is...  Perhaps that's the only way to do it though.

---Tim
__
css-discuss [cs...@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/

Re: [css-d] Playing with CSS3 transitions

[David Laakso]

Climis, Tim wrote:
> In a comment on Gabrielle's blog posting a couple weeks ago about whether or 
> not animation belongs in CSS, I came up with a use case for CSS dropdown 
> menus.  Basically, my idea was that you might want to make your menu drop 
> down with a wipe.
>
>
> ---Tim
>   






Promising, I think...

Near the bottom of the page he has a fairly recent example of a CSS3 
transition slide-down...


Best,
~d


-- 
http://chelseacreekstudio.com/

__
css-discuss [cs...@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/