'display' attribute and transition effects in CSS

(Thoughts aloud, not more)

I am experimenting with the way of defining transition dynamic effects in 
CSS.

As an example: simple blend effect - gradual blending from one state to 
another.

Screenshot of what I mean is here:

http://terrainformatica.com/htmlayout/images/animation-blend.jpg and another 
one
http://terrainformatica.com/htmlayout/images/animation-blend-popup.jpg

They are taken when mouse is moving over row of "leds" - <img>es:

Style of such IMGes defined as

img:hover
{
   background-image:url(led-red.png);
   transition: blend;  /* experimental attribute */
}

When changing styles in runtime e.g. on :hover I am detecting
change of 'transition' attribute and start animation
(in both directions : mouse-in and mouse-out).

This works but I've got chiken-egg problem in the implementation
of transition:slide effect with 'display' attribute.

Let's say we want to have a collapsing item with transition:

div p { display:none;  }
div:hover p { display:block; transition:slide; }

<div>caption
   <p>collapsing content</p>
</div>

So when mouse leaves the div it starts gradualy hide <p> element.

The problem is simple: to draw intermediate states I need to know
element model - block, inline-block, etc. but it is  already set to "none".

Problem with the 'display' also arises in other places when it is used
to show/hide elements in normal flow.

I am thinking that it would be nice if instead of display:none we would
have something like visibility:none;
this will allow to retain display model information and do what
dispaly:none does currently.

Andrew Fedoniouk.
http://terrainformatica.com

Received on Sunday, 6 November 2005 01:00:00 UTC