sdesai · August 6, 2010 22:43
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 <html>

    <head> 
        <style> 
        #demo {
            background:#ccc;
            width:20px;
            height:20px;
        }
        </style>
        <script src="/YuiWip/yui3/build/yui/yui.js"></script>
    </head>

    <body>
        <div id="demo">this is a demo</div>

        <script type="text/javascript">
        YUI({filter:'raw'}).use('transition', 'selector-native', 'node-style', function(Y) {
        
            var node = Y.one('#demo');
         
            node.on('transition:end', function(e) {
                console.log(e);
            });
        
            document.onclick = function() {
                var style = node._node.style;
        
                node.transition({
                    easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
                    duration: 0,
                    transform: 'translate(0px,1px)'
                });
        
                node.transition({
                    easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
                    duration: 0,
                    transform: 'translate(0px,2px)'
                });
        
                node.transition({
                    easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
                    duration: 0,
                    transform: 'translate(0px,3px)'
                });
        
                node.transition({
                    easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
                    duration: 0.4,
                    transform: 'translate(0px,4px)'
                });
            };
         
            node.setStyle('border', '5px solid green');
        });
        </script> 
    </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>

	<head>
	<style>
	#demo {
	background:#ccc;
	width:20px;
	height:20px;
	}
	</style>
	<script src="/YuiWip/yui3/build/yui/yui.js"></script>
	</head>

	<body>
	<div id="demo">this is a demo</div>

	<script type="text/javascript">
	YUI({filter:'raw'}).use('transition', 'selector-native', 'node-style', function(Y) {

	var node = Y.one('#demo');

	node.on('transition:end', function(e) {
	console.log(e);
	});

	document.onclick = function() {
	var style = node._node.style;

	node.transition({
	easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
	duration: 0,
	transform: 'translate(0px,1px)'
	});

	node.transition({
	easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
	duration: 0,
	transform: 'translate(0px,2px)'
	});

	node.transition({
	easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
	duration: 0,
	transform: 'translate(0px,3px)'
	});

	node.transition({
	easing: 'cubic-bezier(0, 0.1, 0, 1.0)',
	duration: 0.4,
	transform: 'translate(0px,4px)'
	});
	};

	node.setStyle('border', '5px solid green');
	});
	</script>
	</body>
	</html>