Start again

2026-02-19 03:31:34 +01:00 · 2020-10-04 17:14:00 +02:00
parent c0d3912413
commit 091f119048
4382 changed files with 1762543 additions and 9606 deletions
--- a/vendors/transitionize/examples/browserify.js
+++ b/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);
+  });
+};
--- a/vendors/transitionize/examples/example.html
+++ b/vendors/transitionize/examples/example.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Transitionize Example Page</title>
+  <style type="text/css">
+    .wrap {
+      height: 75px;
+      margin: 100px auto 0;
+      position: relative;
+      width: 300px;
+    }
+
+    .elem {
+      background-color: #febf04;
+      border-radius: 100%;
+      bottom: 0;
+      display: block;
+      height: 75px;
+      left: 0;
+      position: absolute;
+      width: 75px;
+    }
+  </style>
+  <script src="bundle.js"></script>
+</head>
+<body>
+  <div class="wrap">
+    <span class="elem js-elem"></span>
+  </div>
+</body>
+</html>