Start again

vendors/transitionize/examples/browserify.js

@@ -0,0 +1,46 @@
+/**
+ * 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);
+  });
+};