transition-native.html revision 959c053d56a076109993a2f14094d20b1f8c0c17
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<html>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<head>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<style>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney#demo {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney background:#ccc;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney width:200px;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney height:200px;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney margin-top:200px;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney overflow: hidden;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney position:relative;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney -webkit-transition-property: width, height, top, left, opacity;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney -webkit-transition-duration: 1s;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney}
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney</style>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney</head>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<body>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<div id="demo">this is a demo</div>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney<script type="text/javascript">
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney var node = document.getElementById('demo'),
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney computed = getComputedStyle(node, '');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney node.addEventListener('webkitTransitionEnd', function(e) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney console.log(e.propertyName);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney console.log(e.elapsedTime);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney console.log(node.style[e.propertyName]);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney });
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney document.onclick = function() {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney var w = parseFloat(computed.width) + 100;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney console.log(w);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney node.style.width = w + 'px';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney };
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney</script>
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney</body></html>