PHP Classes

File: vendors/gentelella/vendors/transitionize/examples/browserify.js

Recommend this page to a friend!
  Classes of Jorge Castro   Gentelella BladeOne   vendors/gentelella/vendors/transitionize/examples/browserify.js   Download  
File: vendors/gentelella/vendors/transitionize/examples/browserify.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Gentelella BladeOne
Render templates using Bootstrap for presentation
Author: By
Last change:
Date: 3 years ago
Size: 1,319 bytes
 

Contents

Class file image Download
/** * 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); }); };