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).


The original mail follows:


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 

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:

div#container > div {
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
  form.style.opacity = "1";
<div id="container"></div>
<input type="button" value="add form" onclick="addForm();">

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 

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 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:34:38 UTC