transition.html revision 73857faca3d4266c7840cd6ce428a71cf9a94d0c
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
26d8ffe715e74d1e67d268551449b780fec1b95fAutomatic Updater<html>
26d8ffe715e74d1e67d268551449b780fec1b95fAutomatic Updater<head>
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater<style>
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt.demo {
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt background:#ccc;
26d8ffe715e74d1e67d268551449b780fec1b95fAutomatic Updater width:200px;
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt height:200px;
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt Xpadding-bottom: 100px;
26d8ffe715e74d1e67d268551449b780fec1b95fAutomatic Updater overflow: hidden;
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt position:relative;
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt XX-webkit-transition: width .0001s ease-out;
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt}
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt</style>
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt<script src="/build/yui/yui.js"></script>
26d8ffe715e74d1e67d268551449b780fec1b95fAutomatic Updater
5a24d24c8fba3480d707c0c902379ddb36501e12Automatic Updater</head><body>
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt<div class="demo">this is a demo</div>
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt<div class="demo">this is a demo</div>
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater<script type="text/javascript">
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater
553ead32ff5b00284e574dcabc39115d4d74ec66Evan HuntYUI({filter:'debug'}).use('transition', 'event-custom-complex', 'selector-native', 'node-style', function(Y) {
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt var nodes = Y.all('.demo'),
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt node = nodes.item(0),
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt running = false;
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt node.on('transition:start', function(e) {
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt console.log(e.type);
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt });
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt node.on('transition:propertyEnd', function(e) {
8ec3c085233cedb22b05da36e2773c8f357a7e45Automatic Updater console.log(e.type + ': ' + e.propertyName);
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt console.log(e.elapsedTime);
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt });
8ec3c085233cedb22b05da36e2773c8f357a7e45Automatic Updater
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt node.on('transition:end', function(e) {
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater console.log(e.type);
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt console.log(e.elapsedTime);
f8e3e03cacd16ffb923a9603fca23a9e1a1fee07Automatic Updater
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater });
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater document.onclick = function() {
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater node.setStyles({
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt height: 0,
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt width: 0
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt });
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt node.show('sizeIn', {
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt height: '200px'
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt }, function(e) {
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater Y.log(e);
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater Y.log('callback 1');
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater node.hide(true);
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater });
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater };
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater nodes.setStyle('border', '5px solid green');
0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater});
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt</script>
8ec3c085233cedb22b05da36e2773c8f357a7e45Automatic Updater</body></html>
553ead32ff5b00284e574dcabc39115d4d74ec66Evan Hunt