sdesai/gist:512147

## 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>