Skip to content

Instantly share code, notes, and snippets.

@brehaut
Created September 17, 2013 23:21
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save brehaut/6602086 to your computer and use it in GitHub Desktop.
ontransitionend with new elements
<!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>
<!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