tests/manual/transition.html

	transition.html revision 73857faca3d4266c7840cd6ce428a71cf9a94d0c
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.demo {
    background:#ccc;
    width:200px;
    height:200px;
    Xpadding-bottom: 100px;
    overflow: hidden;
    position:relative;
    XX-webkit-transition: width .0001s ease-out;
}
</style>
<script src="/build/yui/yui.js"></script>

</head><body>
<div class="demo">this is a demo</div>
<div class="demo">this is a demo</div>

<script type="text/javascript">

YUI({filter:'debug'}).use('transition', 'event-custom-complex', 'selector-native', 'node-style', function(Y) {
    var nodes = Y.all('.demo'),
        node = nodes.item(0),
        running = false;

    node.on('transition:start', function(e) {
        console.log(e.type);
    });
    node.on('transition:propertyEnd', function(e) {
        console.log(e.type + ': ' + e.propertyName);
        console.log(e.elapsedTime);
    });

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

    });

    document.onclick = function() {
        node.setStyles({
            height: 0,
            width: 0
        });
        node.show('sizeIn', {
            height: '200px'
        }, function(e) {
            Y.log(e);
            Y.log('callback 1');
            node.hide(true);
        });
    };

    nodes.setStyle('border', '5px solid green');
});

</script>
</body></html>