feat: first commit

holyzfy · Mar 14, 2018 · 659bd07 · 659bd07
commit 659bd07
Show file tree

Hide file tree

Showing 11 changed files with 2,633 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+    "presets": ["env"],
+    "plugins": [
+        "add-module-exports",
+        "transform-es2015-modules-umd"
+    ]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+js/lib
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,59 @@
+{
+    "extends": "eslint:recommended",
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "globals":  {
+        "inView": true,
+        "jQuery":  true,
+        "$": true,
+        "app":  true,
+        "Vue":  true,
+        "VueRouter": true
+    },
+    "rules": {
+        "strict": ["error", "global"],
+        "semi": "error",
+        "quotes": ["warn", "single"],
+        "eqeqeq":  ["warn"],
+        "no-alert": "error",
+        "curly": ["error", "all"],
+        "array-callback-return": "error",
+        "no-extend-native": "error",
+        "no-unused-vars": ["warn", {"args": "none"}],
+        "no-implicit-globals": "warn",
+        "no-loop-func": "warn",
+        "no-return-assign": "warn",
+        "no-unmodified-loop-condition": "warn",
+        "no-nested-ternary": ["error"],
+        "no-eval": ["error"],
+        "no-caller": ["error"],
+        "no-else-return": ["warn"],
+        "no-console": ["warn"],
+        "default-case": ["error"],
+        "no-with": ["error"],
+        "no-array-constructor": ["error"],
+        "no-warning-comments": ["warn"],
+        "no-unused-expressions": ["warn", { "allowShortCircuit": true, "allowTernary": true }],
+        "no-unneeded-ternary": ["error"],
+        "no-undefined": ["error"],
+        "no-multi-str": ["error"],
+        "no-tabs": ["error"],
+        "no-new-wrappers": ["error"],
+        "no-use-before-define": ["error", {"functions": false}],
+        "max-nested-callbacks": ["error", 4],
+        "complexity": ["error", 10],
+        "max-statements-per-line": ["warn"],
+        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+        "max-params": ["warn", { "maximum": 4}],
+        "new-cap": ["warn", { "newIsCap": true, "capIsNew": false }],
+        "comma-spacing": ["warn"],
+        "comma-dangle": ["warn", "never"],
+        "max-statements": ["warn", 80, {"ignoreTopLevelFunctions": true}],
+        "no-multiple-empty-lines": ["error", {"max": 1}]
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+Thumbs.db
+*.log
+.swp
+.project
+*.map
+test.html
+test.js
+variable.css
diff --git a/animation.js b/animation.js
@@ -0,0 +1,42 @@
+var className = 'animation';
+
+function parallel(...targets) {
+    return flow('all', targets);
+}
+
+function race(...targets) {
+    return flow('race', targets);
+}
+
+function flow(type, targets) {
+    targets = targets.map(item => getElement(item)).reduce((x, y) => x.concat(y));
+    var promises = targets.map(el => new Promise(resolve => el.addEventListener('transitionend', resolve)));
+    targets.forEach(el => el.classList.add(className));
+    return Promise[type](promises);
+}
+
+function series(...targets) {
+    targets = targets.map(item => getElement(item)).reduce((x, y) => x.concat(y));
+    var promises = targets.map(el => new Promise(resolve => el.addEventListener('transitionend', resolve)));
+    for(let i = 0, length = promises.length; i < length - 1; i++) {
+        promises[i].then(() => targets[i + 1].classList.add(className));
+    }
+    targets[0].classList.add(className);
+    return Promise.all(promises);
+}
+
+function getElement(selector) {
+    if(typeof selector === 'string') {
+        return Array.from(document.querySelectorAll(selector));
+    }
+    if(selector.length >= 0) {
+        return Array.from(selector);
+    }
+    return selector;
+}
+
+export default {
+    parallel,
+    race,
+    series
+};
diff --git a/demo.html b/demo.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>demo</title>
+<script src="dist/animation-1.0.0.js"></script>
+<style>
+body {
+    font-size: 20px;
+    font-weight: bold;
+}
+li {
+    width: 10px;
+    margin: 10px 0;
+    background: #080;
+    color: #fff;
+}
+.a1.animation {
+    transition: 6s;
+}
+.a2 {
+    width: 30px;
+}
+.a3 {
+    width: 20px;
+}
+.a3.animation {
+    transition: 1s;
+}
+.animation {
+    transition: 3s;
+    width: 200px;
+}
+</style>
+</head>
+
+<body>
+<h1>Demo</h1>
+<ul>
+    <li class="a1">1</li>
+    <li class="a2">2</li>
+    <li class="a3">3</li>
+</ul>
+<div>
+    <button id="btn-parallel" type="button">parallel</button>
+    <button id="btn-series" type="button">series</button>
+    <button id="btn-race" type="button">race</button>
+    <button id="btn-reset" type="button" style="color: #f00;">reset</button>
+</div>
+<script>
+function bindClick(selector, handle) {
+    var el = document.querySelector(selector);
+    el.addEventListener('click', handle);
+}
+
+function done() {
+    alert('done');
+}
+
+bindClick('#btn-parallel', function () {
+    animation.parallel('li').then(done);
+});
+
+bindClick('#btn-series', function () {
+    animation.series('li').then(done);
+});
+
+bindClick('#btn-race', function () {
+    animation.race('li').then(done);
+});
+
+bindClick('#btn-reset', function () {
+    Array.from(document.querySelectorAll('.animation')).forEach(function (item) {
+        item.classList.remove('animation');
+    });
+});
+
+</script>
+</body>
+</html>
diff --git a/dist/animation-1.0.0.js b/dist/animation-1.0.0.js
@@ -0,0 +1,99 @@
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(['module', 'exports'], factory);
+    } else if (typeof exports !== "undefined") {
+        factory(module, exports);
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory(mod, mod.exports);
+        global.animation = mod.exports;
+    }
+})(this, function (module, exports) {
+    'use strict';
+
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    var className = 'animation';
+
+    function parallel() {
+        for (var _len = arguments.length, targets = Array(_len), _key = 0; _key < _len; _key++) {
+            targets[_key] = arguments[_key];
+        }
+
+        return flow('all', targets);
+    }
+
+    function race() {
+        for (var _len2 = arguments.length, targets = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            targets[_key2] = arguments[_key2];
+        }
+
+        return flow('race', targets);
+    }
+
+    function flow(type, targets) {
+        targets = targets.map(function (item) {
+            return getElement(item);
+        }).reduce(function (x, y) {
+            return x.concat(y);
+        });
+        var promises = targets.map(function (el) {
+            return new Promise(function (resolve) {
+                return el.addEventListener('transitionend', resolve);
+            });
+        });
+        targets.forEach(function (el) {
+            return el.classList.add(className);
+        });
+        return Promise[type](promises);
+    }
+
+    function series() {
+        for (var _len3 = arguments.length, targets = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+            targets[_key3] = arguments[_key3];
+        }
+
+        targets = targets.map(function (item) {
+            return getElement(item);
+        }).reduce(function (x, y) {
+            return x.concat(y);
+        });
+        var promises = targets.map(function (el) {
+            return new Promise(function (resolve) {
+                return el.addEventListener('transitionend', resolve);
+            });
+        });
+
+        var _loop = function _loop(i, length) {
+            promises[i].then(function () {
+                return targets[i + 1].classList.add(className);
+            });
+        };
+
+        for (var i = 0, length = promises.length; i < length - 1; i++) {
+            _loop(i, length);
+        }
+        targets[0].classList.add(className);
+        return Promise.all(promises);
+    }
+
+    function getElement(selector) {
+        if (typeof selector === 'string') {
+            return Array.from(document.querySelectorAll(selector));
+        }
+        if (selector.length >= 0) {
+            return Array.from(selector);
+        }
+        return selector;
+    }
+
+    exports.default = {
+        parallel: parallel,
+        race: race,
+        series: series
+    };
+    module.exports = exports['default'];
+});
diff --git a/dist/animation-1.0.0.min.js b/dist/animation-1.0.0.min.js