Re: [css3-transitions] Issues with starting transitions after inserting content

The author is doing the following:

  container.appendChild(form);
  form.style.opacity = "1";

but the browser never renders the initial "opacity: 0" state, so a transition does not occur. This is similar to wanting transitions to run when "display" changes from "none" to something.

I recall we talked about a similar issue before, but then in relation to changing inline style from JavaScript and expecting transitions to run. David Baron added some words to the spec, at <http://dev.w3.org/csswg/css3-transitions/#starting>

"Since this specification does not define what property changes are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others."

I think it would be hard for implementations to work around this problem, but I'm open to suggestions.

Simon

On Jun 24, 2010, at 7:40 PM, Boris Zbarsky wrote:

> This was apparently sent to the list a few weeks back, but the moderator
> is awol, so I'm forwarding it along.  The original source of the
> discussion is https://bugzilla.mozilla.org/show_bug.cgi?id=571748 and
> the original mail author is Mathieu Pellerin <nirvn.asia@gmail.com>
> (cced on this mail).
> 
> -Boris
> 
> The original mail follows:
> 
> Greetings,
> 
> I recently started playing with CSS transitions and seem to have
> stumbled upon an important issue that could seriously restrict the
> usefulness and relevance of CSS transitions used within a dynamic HTML
> context.
> 
> Scenario: A web application makes use of a <div id=”container”></div> to
> dynamically append an indefinite number of form elements. The web
> developer would like to use CSS transition rules to create a visually
> pleasing fade-in when elements are appended.
> 
> The scenario translated into code:
> 
> <html>
> <style>
> div#container > div {
> opacity:0;
> transition-property:opacity;
> transition-duration:400ms;
> </style>
> <script>
> function addForm() {
> var container = document.getElementById('container');
> var form = document.createElement('div');
> 
> [...]
> 
> //in theory, the div's opacity should be 0 when appended
> //as per defined in the CSS rule above
> container.appendChild(form);
> form.style.opacity = "1";
> }
> </script>
> <body>
> <div id="container"></div>
> <input type="button" value="add form" onclick="addForm();">
> </body>
> </html>
> 
> Right now, current implementations (Mozilla, Webkit, Opera) respecting
> the CSS transitions spec all fail to provide a transition from opacity 0
> to 1 when the appended form.style.opacity is modified within the function.
> 
> The desired effect can be obtained by delaying the opacity style change
> using a setTimeout() function. That is however subobtimal and rather
> impractical.
> 
> Without a modification or addition to the spec in order to deal with
> style change of appended elements within a dynamic HTML context, chances
> are CSS transition will be limited to :hover contexts only.
> 
> I hope this message is clear enough and can result in a fruitful discussion.
> 
>

Received on Friday, 25 June 2010 03:30:24 UTC