Paul Panserrieu
@42loops
http://42loops.com/playing-with-webkit
" Transitions are implicit animations that occur when you change an animatable CSS property "
(Safari CSS Visual Effects Guide)
A first naive example
<style type="text/css" media="screen">
.test {
background-color:green;
text-align:center;
width:400px;
height:400px;
-webkit-transition: background-color 2s ease-in;
}
</style>
<script>
function startATransition () {
this.style.cssText += " background-color: red;"
}
</script>
<div onclick="startATransition()"
class="test">
</div>Testing it now!
A second naive example
<style type="text/css" media="screen">
.test {
background-color:green;
text-align:center;
width:200px;
opacity:0.8;
-webkit-transition:-webkit-transform 2s ease-in;
}
</style>
<script>
function startATransition () {
this.style.cssText += " -webkit-transform: rotate(720deg)"
+ "scale(2.5)"
+ "rotateX(720deg)"
+ "translate3d(0px,200px,0px);"
}
</script>
<div onclick="startATransition()"
class="test">
42l∞ps
</div>Testing it now!
42l∞ps
My Goal:
I want to assign a list of transitions to a DOM element.
Something like this...
transitions(el, aList, cb, scope)Where aList is an array of transitions configuration:
var myTransitionsConfig = [
{
val:'translate3d(100px,0,0)',
dur:1,
easing:'linear',
cb: function (elt) {
...
}
},
...
];First some helpers
I want to see setTimeOut just one Time
Function.prototype.delay = function(s){
setTimeout(this, s*1000);
};A function to add css properties to a DOM element.
function css (id, style) {
var el = id;
if (typeof id == 'string') {
el = document.getElementById(id);
}
el.style.cssText += ';' + style;
}A function which assign a transform transition to an element.
function anim (id, transform, dur, easing){
css(id, '-webkit-transition:'
+ -webkit-transform '
+ ( dur || 0.5 ) + 's '
+ ( easing || '' )
+ '; -webkit-transform:'
+ transform);
}And now my transitions function
function transitions(elt, l, cb, scope) {
var index = 0;
var animation = function () {
anim(elt, l[index].val, l[index].dur, l[index++].easing);
}
animation.delay(0);
elt.addEventListener( "webkitTransitionEnd",
onTansitionEnd,
true);
function onTansitionEnd(ev) {
ev.stopPropagation();
if(ev.srcElement === elt) {
if (l[index-1].cb) l[index-1].cb.call(scope, elt);
if (index === l.length) {
elt.removeEventListener("webkitTransitionEnd",
onTansitionEnd,
true);
if (cb) cb.call(scope, elt);
}
else {
animation.delay(0);
}
}
}
}first DEMO with the following transitions:
var a = new Date().getTime();
function delta() {
console.log((new Date().getTime() - startTime) + 'ms');
}
var oups =
[{
val:'translate3d(500px,100px,0) rotate(720deg)',
dur:1,
easing:'linear',
cb: delta
}, {
val:'translate3d(700px,0px,0) skewY(340deg) rotate(-540deg)',
easing:'ease-in-out',
dur:2,
cb: delta
}, {
val:'translate3d(400px,100px,0) rotate3d(34,45,36,-560deg)',
easing:'ease-in',
dur:3,
cb: delta
}, {
val:'translate3d(0px,0px,0) rotate(0deg)',
easing:'ease-in',
dur:1,
cb: delta
}]; 
Adding an image...
<img id='my-super-test' src='image/one/promotejsvs.png' />Do the transitions...
var myelt = document.getElementById('my-super-test');
transitions(myelt, oups, function (elt) {
alert('Done');
});
The final
Some stars...
MyLastAnimations.forEach(function (trans, index) {
transitions(document.getElementById('star-'+(index+1)), trans);
});