Sha256: c114f3c662543afa03bb2644f1ba6094ff66a75dae4bbd7945f00c029beab974
Contents?: true
Size: 1.29 KB
Versions: 39
Compression:
Stored size: 1.29 KB
Contents
/**
* Transitionize example.
*
* Shows how to change dynamically the transitions of an element.
*
* In this case, the `elem` background color and left properties are given different transition duration,
* according to it's current position. If the circle is in it's initial position, it goes right and
* changes background color faster. If it's already been moved - gets back left and changes background
* color slower.
*
* In order for this to work, with Browserify(http://browserify.org/) already installed, execute the following command:
*
* browserify examples/browserify.js -o examples/bundle.js
*
*/
var transitionize = require('../transitionize');
window.onload = function() {
var elem = document.querySelector('.js-elem')
, prop = {};
elem.addEventListener('click', function() {
var position = parseInt(elem.style.left) || 0;
if (position == 0) {
this.style.left = this.parentNode.offsetWidth - this.offsetWidth + 'px';
this.style.backgroundColor = '#53e7d0';
prop = {
'background-color': '0.3s'
, 'left': '0.3s'
};
} else {
this.style.left = 0;
this.style.backgroundColor = '#febf04';
prop = {
'background-color': '1s'
, 'left': '1s'
};
}
transitionize(elem, prop);
});
};
Version data entries
39 entries across 39 versions & 1 rubygems