W3C home > Mailing lists > Public > www-style@w3.org > June 2010

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

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Thu, 24 Jun 2010 22:40:04 -0400
Message-ID: <4C241704.60805@mit.edu>
To: www-style list <www-style@w3.org>
CC: nirvn.asia@gmail.com
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 02:40:41 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT