triptych · September 22, 2010 18:01
diff --git a/yui3_transitions_bug.html b/yui3_transitions_bug.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 	"http://www.w3.org/TR/html4/strict.dtd">

 <html>
  <head>
      <script type="text/javascript"
   src="http://yui.yahooapis.com/3.2.0/build/simpleyui/simpleyui-min.js"></script>
   
   <link rel="stylesheet" type="text/css" 
    href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
   <script>
   Y.on("domready", function(){
       Y.one("#test").on("click",function(){
        Y.log("clicked!"); 
        Y.all("ul li").transition({
           opacity: {
              easing: 'ease-out',
              duration: 1.25,
              value: 0
            },
            height: {
              delay:1.25,
              easing: 'ease-out',
              value: 0
            }
        })
      })
   });
   
 
   </script>
    </head>
  <body>
    <p> this is some text above the li</p>
    <ul>
      <li>this is a</li>
      <li>this is b</li>
      <li>this is c</li>
      </ul>
      <p>this is some text below the li</p>
      <button id="test">test code</button>
      <div>View this in Firefox -- the elements fade out, then slowly reduce in height.
        In safari and chrome, there's no fade at all, and the elements just "pop" out of existance.
        </div>
    </body>
  </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html>
	<head>
	<script type="text/javascript"
	src="http://yui.yahooapis.com/3.2.0/build/simpleyui/simpleyui-min.js"></script>

	<link rel="stylesheet" type="text/css"
	href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
	<script>
	Y.on("domready", function(){
	Y.one("#test").on("click",function(){
	Y.log("clicked!");
	Y.all("ul li").transition({
	opacity: {
	easing: 'ease-out',
	duration: 1.25,
	value: 0
	},
	height: {
	delay:1.25,
	easing: 'ease-out',
	value: 0
	}
	})
	})
	});


	</script>
	</head>
	<body>
	<p> this is some text above the li</p>
	<ul>
	<li>this is a</li>
	<li>this is b</li>
	<li>this is c</li>
	</ul>
	<p>this is some text below the li</p>
	<button id="test">test code</button>
	<div>View this in Firefox -- the elements fade out, then slowly reduce in height.
	In safari and chrome, there's no fade at all, and the elements just "pop" out of existance.
	</div>
	</body>
	</html>