46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
|
/**
|
||
|
|
* 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);
|
||
|
|
});
|
||
|
|
};
|