Created
September 17, 2013 23:21
-
-
Save brehaut/6602086 to your computer and use it in GitHub Desktop.
ontransitionend with new elements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
body > div { | |
position: relative; | |
height: 50px; | |
margin-bottom: 10px; | |
} | |
body > div > div { | |
position: absolute; | |
top: 0; | |
height: 100%; | |
width: 50px; | |
background: green; | |
left: 0; | |
-webkit-transition: left 200ms ease; | |
transition: left 200ms ease; | |
} | |
</style> | |
</head> | |
<body> | |
<script language="javascript"> | |
"use strict"; | |
var wait = 0; | |
function new_divs () { | |
var outer = document.createElement("div"); | |
var inner = document.createElement("div"); | |
outer.appendChild(inner); | |
outer.appendChild(document.createTextNode("wait: " + wait + "ms. ")); | |
inner.addEventListener("transitionend", function () { | |
outer.appendChild(document.createTextNode("transitionend")); | |
}, true); | |
// new node is added to the DOM | |
document.body.appendChild(outer); | |
setTimeout(function update() { | |
// style property that is transitioned is modified | |
inner.style.left = "300px"; | |
wait += 1; | |
if (wait <= 25) setTimeout(new_divs, 1000); | |
}, wait); | |
} | |
new_divs(); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
body > div { | |
position: relative; | |
height: 50px; | |
margin-bottom: 10px; | |
} | |
body > div > div { | |
position: absolute; | |
top: 0; | |
height: 100%; | |
width: 50px; | |
background: green; | |
left: 0; | |
-webkit-transition: left 200ms ease; | |
transition: left 200ms ease; | |
} | |
</style> | |
</head> | |
<body> | |
<script language="javascript"> | |
"use strict"; | |
var wait = 0; | |
function new_divs () { | |
var outer = document.createElement("div"); | |
var inner = document.createElement("div"); | |
outer.appendChild(inner); | |
outer.appendChild(document.createTextNode("wait: " + wait + "ms. ")); | |
inner.addEventListener("transitionend", function () { | |
outer.appendChild(document.createTextNode("transitionend")); | |
}, true); | |
// new node is added to the DOM | |
document.body.appendChild(outer); | |
void window.getComputedStyle(inner, null).getPropertyValue("left"); | |
function update() { | |
// style property that is transitioned is modified | |
inner.style.left = "300px"; | |
wait += 1; | |
if (wait <= 25) setTimeout(new_divs, 1000); | |
} | |
update(); | |
} | |
new_divs(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment