feat: 动画 transition 组件实现

miniprogram_dev/app.json

@@ -6,7 +6,9 @@
     "pages/basic/pages/cell/index",
     "pages/basic/pages/button/index",
     "pages/basic/pages/divider/index",
-    "pages/basic/pages/grid/index"
+    "pages/basic/pages/grid/index",
+    "pages/basic/pages/overlay/index",
+    "pages/basic/pages/transition/index"
   ],
   "usingComponents": {
     "nut-icon":"./components/packages/icon/icon",
@@ -15,7 +17,9 @@
     "nut-button":"./components/packages/button/index",
     "nut-divider":"./components/packages/divider/index",
     "nut-grid":"./components/packages/grid/index",
-    "nut-grid-item":"./components/packages/grid-item/index"
+    "nut-grid-item":"./components/packages/grid-item/index",
+    "nut-overlay":"./components/packages/overlay/index",
+    "nut-transition":"./components/packages/transition/index"
   },
   "window":{
     "backgroundTextStyle":"light",

miniprogram_dev/components/index.js

@@ -82,34 +82,64 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 14);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 11:
+/***/ 14:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _ = __webpack_require__(12);
+var _ = __webpack_require__(3);
 
 Component({});
 
 /***/ }),
 
-/***/ 12:
+/***/ 3:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = {
-  getFlag: function getFlag() {
-    return true;
+exports.__esModule = true;
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.getSystemInfoSync = getSystemInfoSync;
+exports.requestAnimationFrame = requestAnimationFrame;
+exports.isObj = isObj;
+function getSystemInfoSync() {
+  var systemInfo = null;
+  if (systemInfo == null) {
+    systemInfo = wx.getSystemInfoSync();
+  }
+
+  return systemInfo;
+}
+
+// 模拟 浏览器 requestAnimationFrame
+function requestAnimationFrame(cb) {
+  var systemInfo = getSystemInfoSync();
+
+  if (systemInfo.platform === 'devtools') {
+    return setTimeout(function () {
+      cb();
+    }, 1000 / 30);
   }
-};
+
+  return wx.createSelectorQuery().selectViewport().boundingClientRect().exec(function () {
+    cb();
+  });
+}
+
+function isObj(x) {
+  var type = typeof x === 'undefined' ? 'undefined' : _typeof(x);
+  return x !== null && (type === 'object' || type === 'function');
+}
 
 /***/ })
 

miniprogram_dev/components/index.json

@@ -8,7 +8,9 @@
     "nut-cell-group":"./packages/cellgroup/index",
     "nut-divider":"./packages/divider/index",
     "nut-grid":"./packages/grid/index",
-    "nut-grid-item":"./packages/grid-item/index"
+    "nut-grid-item":"./packages/grid-item/index",
+    "nut-overlay":"./packages/overlay/index",
+    "nut-transition":"./packages/transition/index"
   },
   "componentGenerics": {
     "genericsTest": true

miniprogram_dev/components/lib.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 13);
+/******/ 	return __webpack_require__(__webpack_require__.s = 15);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 13:
+/***/ 15:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/avatar/avatar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -168,7 +168,8 @@ var basic = exports.basic = Behavior({
 /* 2 */,
 /* 3 */,
 /* 4 */,
-/* 5 */
+/* 5 */,
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/button/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 3);
+/******/ 	return __webpack_require__(__webpack_require__.s = 4);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -166,7 +166,8 @@ var basic = exports.basic = Behavior({
 
 /***/ }),
 /* 2 */,
-/* 3 */
+/* 3 */,
+/* 4 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/cell/cell.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -167,7 +167,8 @@ var basic = exports.basic = Behavior({
 /***/ }),
 /* 2 */,
 /* 3 */,
-/* 4 */
+/* 4 */,
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/cellgroup/index.js

@@ -82,11 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 7);
+/******/ 	return __webpack_require__(__webpack_require__.s = 8);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 0:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -143,7 +144,8 @@ function NutComponent(NutOptions) {
 module.exports = { NutComponent: NutComponent };
 
 /***/ }),
-/* 1 */
+
+/***/ 1:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -165,12 +167,8 @@ var basic = exports.basic = Behavior({
 });
 
 /***/ }),
-/* 2 */,
-/* 3 */,
-/* 4 */,
-/* 5 */,
-/* 6 */,
-/* 7 */
+
+/***/ 8:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -191,5 +189,6 @@ var _component = __webpack_require__(0);
 });
 
 /***/ })
-/******/ ]);
+
+/******/ });
 //# sourceMappingURL=index.js.map

miniprogram_dev/components/packages/divider/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 8);
+/******/ 	return __webpack_require__(__webpack_require__.s = 9);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -168,7 +168,7 @@ var basic = exports.basic = Behavior({
 
 /***/ }),
 
-/***/ 8:
+/***/ 9:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/grid-item/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 10);
+/******/ 	return __webpack_require__(__webpack_require__.s = 11);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -249,7 +249,8 @@ function useChildren(name, onEffect) {
 /* 7 */,
 /* 8 */,
 /* 9 */,
-/* 10 */
+/* 10 */,
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/grid/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 9);
+/******/ 	return __webpack_require__(__webpack_require__.s = 10);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -248,7 +248,8 @@ function useChildren(name, onEffect) {
 /* 6 */,
 /* 7 */,
 /* 8 */,
-/* 9 */
+/* 9 */,
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/icon/icon.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ 	return __webpack_require__(__webpack_require__.s = 7);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -169,7 +169,8 @@ var basic = exports.basic = Behavior({
 /* 3 */,
 /* 4 */,
 /* 5 */,
-/* 6 */
+/* 6 */,
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/overlay/index.js

@@ -0,0 +1,213 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 12);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _basic = __webpack_require__(1);
+
+function mapKeys(source, target, map) {
+    Object.keys(map).forEach(function (key) {
+        if (source[key]) {
+            target[map[key]] = source[key];
+        }
+    });
+}
+function NutComponent(NutOptions) {
+    var options = {};
+    mapKeys(NutOptions, options, {
+        data: 'data',
+        props: 'properties',
+        mixins: 'behaviors',
+        methods: 'methods',
+        beforeCreate: 'created',
+        created: 'attached',
+        mounted: 'ready',
+        destroyed: 'detached',
+        classes: 'externalClasses',
+        observers: 'observers'
+    });
+    // add default externalClasses
+    options.externalClasses = options.externalClasses || [];
+    options.externalClasses.push('custom-class');
+    // add default behaviors
+    options.behaviors = options.behaviors || [];
+    options.behaviors.push(_basic.basic);
+    // add relations
+    var relation = NutOptions.relation;
+
+    if (relation) {
+        options.relations = relation.relations;
+        options.behaviors.push(relation.mixin);
+    }
+    // map field to form-field behavior
+    if (NutOptions.field) {
+        options.behaviors.push('wx://form-field');
+    }
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true
+    };
+    console.log(options);
+    Component(options);
+}
+module.exports = { NutComponent: NutComponent };
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+exports.__esModule = true;
+var basic = exports.basic = Behavior({
+    methods: {
+        $emit: function $emit(name, detail, options) {
+            this.triggerEvent(name, detail, options);
+        },
+        set: function set(data) {
+            this.setData(data);
+            return new Promise(function (resolve) {
+                return wx.nextTick(resolve);
+            });
+        }
+    }
+});
+
+/***/ }),
+
+/***/ 12:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _component = __webpack_require__(0);
+
+(0, _component.NutComponent)({
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        zIndex: {
+            type: [Number, String],
+            default: 2000
+        },
+        duration: {
+            type: [Number, String],
+            default: 0.3
+        },
+        overlayClass: {
+            type: String,
+            default: ''
+        },
+        lockScroll: {
+            type: Boolean,
+            default: false
+        },
+        overlayStyle: Object,
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {}
+});
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=index.js.map

miniprogram_dev/components/packages/overlay/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+  }

miniprogram_dev/components/packages/overlay/index.wxml

@@ -0,0 +1,11 @@
+<!-- <wxs src="./index.wxs" module="computed" /> -->
+
+<!-- <Transition name="overlay-fade"> -->
+    <!-- <view :class="classes" @touchmove.stop="touchmove" @click="onClick" :style="style" v-show="visible">
+      <slot></slot>
+    </view> -->
+<!-- </Transition> -->
+
+
+
+<view ></view>

miniprogram_dev/components/packages/overlay/index.wxs

@@ -0,0 +1,62 @@
+/* eslint-disable */
+var pxCheck = require('../wxs/pxCheck.wxs');
+var style = require('../wxs/style.wxs');
+
+
+
+function Classes(data) {
+
+    var prefixCls = 'nut-button'
+
+    var classes = [prefixCls]
+
+    if (data.type) {
+        classes.push(prefixCls + '--' + data.type)
+    }
+    if (data.size) {
+        classes.push(prefixCls + '--' + data.size)
+    }
+
+    if (data.shape) {
+        classes.push(prefixCls + '--' + data.shape)
+    }
+    if (data.plain) {
+        classes.push(prefixCls + '--plain')
+    }
+    if (data.block) {
+        classes.push(prefixCls + '--block')
+    }
+    if (data.disabled) {
+        classes.push(prefixCls + '--disabled')
+    }
+    if (data.loading) {
+        classes.push(prefixCls + '--loading')
+    }
+
+    return classes.join(' ');
+}
+
+function Styled(data) {
+
+    var styley = {};
+      if (data.color) {
+        console.log(data)
+        if (data.plain) {
+            styley.color = data.color;
+            styley.background = '#fff';
+          if (data.color.indexOf('gradient') == -1) {
+            styley.borderColor = data.color;
+          }
+        } else {
+            styley.color = '#fff';
+            styley.background = data.color;
+        }
+      }
+
+    return style([styley]);
+}
+
+module.exports = {
+    classes: Classes,
+    styled: Styled
+};

miniprogram_dev/components/packages/overlay/index.wxss

@@ -0,0 +1,22 @@
+.overlay-fade-enter-active,
+.overlay-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.overlay-fade-enter-from,
+.overlay-fade-leave-to {
+  opacity: 0;
+}
+
+.nut-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}

miniprogram_dev/components/packages/transition/index.js

@@ -0,0 +1,333 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _basic = __webpack_require__(1);
+
+function mapKeys(source, target, map) {
+    Object.keys(map).forEach(function (key) {
+        if (source[key]) {
+            target[map[key]] = source[key];
+        }
+    });
+}
+function NutComponent(NutOptions) {
+    var options = {};
+    mapKeys(NutOptions, options, {
+        data: 'data',
+        props: 'properties',
+        mixins: 'behaviors',
+        methods: 'methods',
+        beforeCreate: 'created',
+        created: 'attached',
+        mounted: 'ready',
+        destroyed: 'detached',
+        classes: 'externalClasses',
+        observers: 'observers'
+    });
+    // add default externalClasses
+    options.externalClasses = options.externalClasses || [];
+    options.externalClasses.push('custom-class');
+    // add default behaviors
+    options.behaviors = options.behaviors || [];
+    options.behaviors.push(_basic.basic);
+    // add relations
+    var relation = NutOptions.relation;
+
+    if (relation) {
+        options.relations = relation.relations;
+        options.behaviors.push(relation.mixin);
+    }
+    // map field to form-field behavior
+    if (NutOptions.field) {
+        options.behaviors.push('wx://form-field');
+    }
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true
+    };
+    console.log(options);
+    Component(options);
+}
+module.exports = { NutComponent: NutComponent };
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+exports.__esModule = true;
+var basic = exports.basic = Behavior({
+    methods: {
+        $emit: function $emit(name, detail, options) {
+            this.triggerEvent(name, detail, options);
+        },
+        set: function set(data) {
+            this.setData(data);
+            return new Promise(function (resolve) {
+                return wx.nextTick(resolve);
+            });
+        }
+    }
+});
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _component = __webpack_require__(0);
+
+var _utils = __webpack_require__(3);
+
+(0, _component.NutComponent)({
+    classes: ['enter-class', 'enter-active-class', 'enter-to-class', 'leave-class', 'leave-active-class', 'leave-to-class'],
+    props: {
+        show: {
+            type: Boolean,
+            value: false,
+            observer: 'observeShow'
+        },
+        // 动画类型  fade fade-up
+        name: {
+            type: String,
+            value: 'fade'
+        },
+        duration: {
+            type: null,
+            value: 300
+        },
+        customStyle: String
+    },
+    data: {
+        classes: [],
+        inited: false,
+        display: false,
+        currentDurtion: 300
+    },
+    ready: function ready() {
+        if (this.data.show === true) {
+            this.observeShow(true, false);
+        }
+    },
+
+    methods: {
+        // 监听 show 
+        observeShow: function observeShow(value, old) {
+            if (value === old) {
+                return;
+            }
+            value ? this.enter() : this.leave();
+        },
+
+        // 进入
+        enter: function enter() {
+            var _this = this;
+
+            var _data = this.data,
+                name = _data.name,
+                duration = _data.duration;
+
+            var currentDuration = (0, _utils.isObj)(duration) ? duration.enter : duration;
+            this.$emit('before-enter');
+            (0, _utils.requestAnimationFrame)(function () {
+                _this.setData({
+                    inited: true,
+                    display: true,
+                    classes: ['nut-' + name + '-enter', 'nut-' + name + '-enter-active', 'enter-class', 'enter-active-class'],
+                    currentDuration: currentDuration
+                });
+                (0, _utils.requestAnimationFrame)(function () {
+                    _this.setData({
+                        classes: ['nut-' + name + '-enter-active', 'nut-' + name + '-enter-to', 'enter-active-class', 'enter-to-class']
+                    });
+                });
+            });
+        },
+
+        // 离开
+        leave: function leave() {
+            var _this2 = this;
+
+            var _data2 = this.data,
+                name = _data2.name,
+                duration = _data2.duration;
+
+            var currentDuration = (0, _utils.isObj)(duration) ? duration.leave : duration;
+            (0, _utils.requestAnimationFrame)(function () {
+                _this2.setData({
+                    classes: ['nut-' + name + '-leave', 'nut-' + name + '-leave-active', 'leave-class', 'leave-active-class'],
+                    currentDuration: currentDuration
+                });
+                (0, _utils.requestAnimationFrame)(function () {
+                    setTimeout(function () {
+                        _this2.onTransitionEnd();
+                    }, currentDuration);
+                    _this2.setData({
+                        classes: ['nut-' + name + '-leave-to', 'nut-' + name + '-leave-active', 'leave-active-class', 'leave-to-class']
+                    });
+                });
+            });
+        },
+
+        // 动画结束
+        onTransitionEnd: function onTransitionEnd() {
+            var _data3 = this.data,
+                show = _data3.show,
+                display = _data3.display;
+
+            if (!show && display) {
+                this.setData({
+                    display: false
+                });
+            }
+        }
+    }
+});
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+exports.__esModule = true;
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.getSystemInfoSync = getSystemInfoSync;
+exports.requestAnimationFrame = requestAnimationFrame;
+exports.isObj = isObj;
+function getSystemInfoSync() {
+  var systemInfo = null;
+  if (systemInfo == null) {
+    systemInfo = wx.getSystemInfoSync();
+  }
+
+  return systemInfo;
+}
+
+// 模拟 浏览器 requestAnimationFrame
+function requestAnimationFrame(cb) {
+  var systemInfo = getSystemInfoSync();
+
+  if (systemInfo.platform === 'devtools') {
+    return setTimeout(function () {
+      cb();
+    }, 1000 / 30);
+  }
+
+  return wx.createSelectorQuery().selectViewport().boundingClientRect().exec(function () {
+    cb();
+  });
+}
+
+function isObj(x) {
+  var type = typeof x === 'undefined' ? 'undefined' : _typeof(x);
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=index.js.map

miniprogram_dev/components/packages/transition/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+  }

miniprogram_dev/components/packages/transition/index.wxml

@@ -0,0 +1,7 @@
+<wxs src="./index.wxs" module="computed" />
+<view 
+    wx:if='{{ inited }}' 
+    class="nut-transition block {{ classes }}"
+    style="{{ computed.styled({ currentDuration, display, customStyle }) }}">
+    <slot />
+</view>

miniprogram_dev/components/packages/transition/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var pxCheck = require('../wxs/pxCheck.wxs');
+var style = require('../wxs/style.wxs');
+
+
+function Styled(data) {
+
+    return style([
+        {
+          '-webkit-transition-duration': data.currentDuration + 'ms',
+          'transition-duration': data.currentDuration + 'ms',
+        },
+        data.display ? null : 'display: none',
+        data.customStyle,
+      ]);
+}
+
+module.exports = {
+    styled: Styled
+};

miniprogram_dev/components/packages/transition/index.wxss

@@ -0,0 +1,79 @@
+.nut-transition {
+  transition-timing-function: ease;
+}
+
+.nut-fade-enter-active,
+.nut-fade-leave-active {
+  transition-property: opacity;
+}
+
+.nut-fade-enter,
+.nut-fade-leave-to {
+  opacity: 0;
+}
+
+.nut-fade-up-enter-active,
+.nut-fade-up-leave-active,
+.nut-fade-down-enter-active,
+.nut-fade-down-leave-active,
+.nut-fade-left-enter-active,
+.nut-fade-left-leave-active,
+.nut-fade-right-enter-active,
+.nut-fade-right-leave-active {
+  transition-property: opacity, transform;
+}
+
+.nut-fade-up-enter,
+.nut-fade-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+
+.nut-fade-down-enter,
+.nut-fade-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+
+.nut-fade-left-enter,
+.nut-fade-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+
+.nut-fade-right-enter,
+.nut-fade-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+
+.nut-slide-up-enter-active,
+.nut-slide-up-leave-active,
+.nut-slide-down-enter-active,
+.nut-slide-down-leave-active,
+.nut-slide-left-enter-active,
+.nut-slide-left-leave-active,
+.nut-slide-right-enter-active,
+.nut-slide-right-leave-active {
+  transition-property: transform;
+}
+
+.nut-slide-up-enter,
+.nut-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.nut-slide-down-enter,
+.nut-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.nut-slide-left-enter,
+.nut-slide-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.nut-slide-right-enter,
+.nut-slide-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+}

miniprogram_dev/components/utils.js

@@ -1,5 +1,36 @@
-module.exports = {
-  getFlag() {
-    return true
-  },
+
+
+export function getSystemInfoSync() {
+  let systemInfo = null
+  if (systemInfo == null) {
+    systemInfo = wx.getSystemInfoSync();
+  }
+
+  return systemInfo;
 }
+
+// 模拟 浏览器 requestAnimationFrame
+export function requestAnimationFrame(cb) {
+    const systemInfo = getSystemInfoSync();
+  
+    if (systemInfo.platform === 'devtools') {
+      return setTimeout(() => {
+        cb();
+      }, 1000 / 30);
+    }
+  
+    return wx
+      .createSelectorQuery()
+      .selectViewport()
+      .boundingClientRect()
+      .exec(() => {
+        cb();
+      });
+  }
+
+
+export function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+

miniprogram_dev/nutui.config.js

@@ -60,6 +60,28 @@ module.exports = [
           "desc": "宫格",
           "author": ""
         },
+        {
+          "version": "3.0.0",
+          "name": "Overlay",
+          "taro": true,
+          "sort": 3,
+          "cName": "遮罩层",
+          "type": "component",
+          "show": true,
+          "desc": "遮罩层",
+          "author": ""
+        },
+        {
+          "version": "3.0.0",
+          "name": "Transition",
+          "taro": true,
+          "sort": 3,
+          "cName": "动画",
+          "type": "component",
+          "show": true,
+          "desc": "动画",
+          "author": ""
+        },
       ]
     }
   ]

miniprogram_dev/pages/basic/pages/overlay/index.js

@@ -0,0 +1,5 @@
+
+
+Component({
+  
+})

miniprogram_dev/pages/basic/pages/overlay/index.json

@@ -0,0 +1,5 @@
+
+{
+    "usingComponents": {}
+}
+  

miniprogram_dev/pages/basic/pages/overlay/index.wxml

@@ -0,0 +1,8 @@
+<view class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-button type="primary" >显示遮罩层</nut-button>
+      <nut-overlay></nut-overlay>
+    </nut-cell>
+    
+</view>

miniprogram_dev/pages/basic/pages/overlay/index.wxss

@@ -0,0 +1,16 @@
+.demo-button-row {
+    margin-bottom: 20px;
+}
+
+.demo-button-row2 {
+    margin-bottom: 10px;
+}
+
+.demo-button-row3{
+    margin-bottom: 10px;
+    display:block
+}
+.nut-button {
+    margin-right: 15px;
+
+}

miniprogram_dev/pages/basic/pages/transition/index.js

@@ -0,0 +1,64 @@
+
+
+Component({
+    data:{
+        amishow:false,
+        showCustom:false,
+        name:'fade'
+    },
+
+    methods: {
+        onClickFade() {
+            console.log('点击')
+        this.trigger('fade');
+        },
+    
+        onClickFadeUp() {
+        this.trigger('fade-up');
+        },
+    
+        onClickFadeDown() {
+        this.trigger('fade-down');
+        },
+    
+        onClickFadeLeft() {
+        this.trigger('fade-left');
+        },
+    
+        onClickFadeRight() {
+        this.trigger('fade-right');
+        },
+    
+        onClickSlideUp() {
+        this.trigger('slide-up');
+        },
+    
+        onClickSlideDown() {
+        this.trigger('slide-down');
+        },
+    
+        onClickSlideLeft() {
+        this.trigger('slide-left');
+        },
+    
+        onClickSlideRight() {
+        this.trigger('slide-right');
+        },
+
+        onClickCustom() {
+            this.setData({ showCustom: true });
+
+            setTimeout(()=>{
+                this.setData({  showCustom: false });
+            }, 1000)
+        },
+
+        trigger(name){
+            this.setData({ name, amishow: true });
+
+            setTimeout(()=>{
+                this.setData({  amishow: false });
+            }, 1000)
+        }
+    }
+})

miniprogram_dev/pages/basic/pages/transition/index.json

@@ -0,0 +1,5 @@
+
+{
+    "usingComponents": {}
+}
+  

miniprogram_dev/pages/basic/pages/transition/index.wxml

@@ -0,0 +1,28 @@
+<view class="demo">
+    <h2>基础用法</h2>
+    
+    <nut-cell title="Fade" bindtap="onClickFade"></nut-cell>
+    <nut-cell title="Fade Up" bindtap="onClickFadeUp"></nut-cell>
+    <nut-cell title="Fade Down" bindtap="onClickFadeDown"></nut-cell>
+    <nut-cell title="Fade Left" bindtap="onClickFadeLeft"></nut-cell>
+    <nut-cell title="Fade Right" bindtap="onClickFadeRight"></nut-cell>
+    <nut-cell title="Side Up" bindtap="onClickSlideUp"></nut-cell>
+    <nut-cell title="Side Down" bindtap="onClickSlideDown"></nut-cell>
+    <nut-cell title="Side Left" bindtap="onClickSlideLeft"></nut-cell>
+    <nut-cell title="Side Right" bindtap="onClickSlideRight"></nut-cell>
+    <nut-cell title="Custom" bindtap="onClickCustom"></nut-cell>
+
+
+    <nut-transition show='{{ amishow }}' name="{{ name }}"></nut-transition>
+
+    <nut-transition
+        show="{{ showCustom }}"
+        name=""
+        duration="{{ { enter: 300, leave: 1000 } }}"
+        custom-class="block"
+        enter-class="nut-enter-class"
+        enter-active-class="nut-enter-active-class"
+        leave-active-class="nut-leave-active-class"
+        leave-to-class="nut-leave-to-class"
+    />
+</view>

miniprogram_dev/pages/basic/pages/transition/index.wxss

@@ -0,0 +1,21 @@
+.block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: #1989fa;
+}
+
+.nut-enter-active-class,
+.nut-leave-active-class {
+  transition-property: background-color, transform;
+}
+
+.nut-enter-class,
+.nut-leave-to-class {
+  background-color: red;
+  transform: rotate(-360deg) translate3d(-100%, -100%, 0);
+}
+  

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "xl-first-miniui",
+  "name": "miniui",
   "version": "0.0.2",
   "description": "",
   "main": "miniprogram_dist/index.js",

src/index.json

@@ -8,7 +8,9 @@
     "nut-cell-group":"./packages/cellgroup/index",
     "nut-divider":"./packages/divider/index",
     "nut-grid":"./packages/grid/index",
-    "nut-grid-item":"./packages/grid-item/index"
+    "nut-grid-item":"./packages/grid-item/index",
+    "nut-overlay":"./packages/overlay/index",
+    "nut-transition":"./packages/transition/index"
   },
   "componentGenerics": {
     "genericsTest": true

src/packages/image/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+  }

src/packages/image/index.scss

@@ -0,0 +1,177 @@
+@import '../../variables.scss';
+
+.nut-button {
+  position: relative;
+  display: inline-block;
+  width: auto;
+  flex-shrink: 0;
+  height: $button-default-height;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  line-height: $button-default-line-height;
+  font-size: $button-default-font-size;
+  text-align: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  appearance: none;
+  user-select: none;
+  touch-action: manipulation;
+  vertical-align: bottom;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  .text {
+    margin-left: 5px;
+  }
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: $black;
+    border: inherit;
+    border-color: $black;
+    border-radius: inherit;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+  &::after {
+    border: none;
+  }
+  &:active::before {
+    opacity: 0.1;
+  }
+  &__warp {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--loading,
+  &--disabled {
+    &::before {
+      display: none;
+    }
+  }
+  &--default {
+    color: $button-default-color;
+    background: $button-default-bg-color;
+    border: $button-border-width solid $button-default-border-color;
+  }
+
+  &--primary {
+    color: $button-primary-color;
+    background: $button-primary-background-color;
+    border: $button-border-width solid transparent;
+  }
+
+  &--info {
+    color: $button-info-color;
+    background: $button-info-background-color;
+    border: $button-border-width solid transparent;
+  }
+
+  &--success {
+    color: $button-success-color;
+    background: $button-success-background-color;
+    border: $button-border-width solid transparent;
+  }
+
+  &--danger {
+    color: $button-danger-color;
+    background: $button-danger-background-color;
+    border: $button-border-width solid transparent;
+  }
+
+  &--warning {
+    color: $button-warning-color;
+    background: $button-warning-background-color;
+    border: $button-border-width solid transparent;
+  }
+
+  &--plain {
+    background: $button-plain-background-color;
+
+    &.nut-button--primary {
+      color: $button-primary-border-color;
+      border-color: $button-primary-border-color;
+    }
+
+    &.nut-button--info {
+      color: $button-info-border-color;
+      border-color: $button-info-border-color;
+    }
+
+    &.nut-button--success {
+      color: $button-success-border-color;
+      border-color: $button-success-border-color;
+    }
+
+    &.nut-button--danger {
+      color: $button-danger-border-color;
+      border-color: $button-danger-border-color;
+    }
+
+    &.nut-button--warning {
+      color: $button-warning-border-color;
+      border-color: $button-warning-border-color;
+    }
+  }
+
+  &--large {
+    width: 100%;
+    height: $button-large-height;
+    line-height: $button-large-line-height;
+    font-size: $button-large-font-size;
+  }
+
+  &--normal {
+    padding: $button-default-padding;
+    font-size: $button-default-font-size;
+  }
+
+  &--small {
+    height: $button-small-height;
+    line-height: $button-small-line-height;
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
+
+    &.nut-button--round {
+      border-radius: $button-small-round-border-radius;
+    }
+  }
+  &--mini {
+    height: $button-mini-height;
+    line-height: $button-mini-line-height;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: $button-disabled-opacity;
+  }
+
+  &--loading {
+    cursor: default;
+    opacity: 0.9;
+  }
+
+  &--round {
+    border-radius: $button-border-radius;
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+}

src/packages/image/index.ts

@@ -0,0 +1,55 @@
+import { NutComponent } from './../../common/component.ts'
+
+NutComponent({
+  props: {
+    color: String,
+    shape: {
+      type: String,
+      value: 'round'
+    },
+    plain: {
+      type: Boolean,
+      value: false
+    },
+    loading: {
+      type: Boolean,
+      value: false
+    },
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+    type: {
+      type: String,
+      value: 'default'
+    },
+    size: {
+      type: String,
+      value: 'normal'
+    },
+    block: {
+      type: Boolean,
+      value: false
+    },
+    icon: {
+      type: String,
+      value: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      value: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      value: 'nutui-iconfont'
+    }
+  },
+
+  methods: {
+    handleClick() {
+      if (!this.props.loading && !this.props.disabled) {
+        this.$emit('click', event);
+      }
+    },
+  },
+});

src/packages/image/index.wxml

@@ -0,0 +1,19 @@
+<wxs src="./index.wxs" module="computed" />
+
+<!-- <view class="{{computed.classes({type,size,shape,plain,block,disabled,loading})}}" style="{{computed.styled({color,plain})}}"  bindtap="handleClick">
+    <view class="nut-button__warp">
+      <nut-icon class="nut-icon-loading" style="line-height:initial" name="loading" wx:if="{{loading}}"></nut-icon>
+      <nut-icon
+        wx:if="{{icon && !loading}}"
+        name="{{icon}}"
+        class-prefix="{{iconClassPrefix}}"
+        font-class-name="{{iconFontClassName}}"
+        style="line-height:initial"
+      ></nut-icon>
+      <view class="{{ (icon || loading)?'text':'' }}">
+        <slot></slot>
+      </view>
+    </view>
+</view> -->
+
+<view>111</view>

src/packages/image/index.wxs

@@ -0,0 +1,62 @@
+/* eslint-disable */
+var pxCheck = require('../wxs/pxCheck.wxs');
+var style = require('../wxs/style.wxs');
+
+
+
+function Classes(data) {
+
+    var prefixCls = 'nut-button'
+
+    var classes = [prefixCls]
+
+    if (data.type) {
+        classes.push(prefixCls + '--' + data.type)
+    }
+    if (data.size) {
+        classes.push(prefixCls + '--' + data.size)
+    }
+
+    if (data.shape) {
+        classes.push(prefixCls + '--' + data.shape)
+    }
+    if (data.plain) {
+        classes.push(prefixCls + '--plain')
+    }
+    if (data.block) {
+        classes.push(prefixCls + '--block')
+    }
+    if (data.disabled) {
+        classes.push(prefixCls + '--disabled')
+    }
+    if (data.loading) {
+        classes.push(prefixCls + '--loading')
+    }
+
+    return classes.join(' ');
+}
+
+function Styled(data) {
+
+    var styley = {};
+      if (data.color) {
+        console.log(data)
+        if (data.plain) {
+            styley.color = data.color;
+            styley.background = '#fff';
+          if (data.color.indexOf('gradient') == -1) {
+            styley.borderColor = data.color;
+          }
+        } else {
+            styley.color = '#fff';
+            styley.background = data.color;
+        }
+      }
+
+    return style([styley]);
+}
+
+module.exports = {
+    classes: Classes,
+    styled: Styled
+};

src/packages/overlay/index.ts

@@ -2,7 +2,7 @@ import { NutComponent } from './../../common/component.ts'
 
 NutComponent({
   props: {
-    visible: {
+    show: {
       type: Boolean,
       default: false
     },
@@ -30,10 +30,6 @@ NutComponent({
   },
 
   methods: {
-    handleClick() {
-      if (!this.props.loading && !this.props.disabled) {
-        this.$emit('click', event);
-      }
-    },
+    
   },
 });

src/packages/overlay/index.wxml

@@ -1,7 +1,11 @@
-<wxs src="./index.wxs" module="computed" />
+<!-- <wxs src="./index.wxs" module="computed" /> -->
 
-<Transition name="overlay-fade">
-    <view :class="classes" @touchmove.stop="touchmove" @click="onClick" :style="style" v-show="visible">
+<!-- <Transition name="overlay-fade"> -->
+    <!-- <view :class="classes" @touchmove.stop="touchmove" @click="onClick" :style="style" v-show="visible">
       <slot></slot>
-    </view>
-</Transition>
+    </view> -->
+<!-- </Transition> -->
+
+
+
+<view ></view>

src/packages/transition/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+  }

src/packages/transition/index.scss

@@ -0,0 +1,83 @@
+@import '../../variables.scss';
+
+.nut-transition {
+  transition-timing-function: ease;
+}
+
+.nut-fade-enter-active,
+.nut-fade-leave-active {
+  transition-property: opacity;
+}
+
+
+.nut-fade-enter,
+.nut-fade-leave-to {
+  opacity: 0;
+}
+
+
+.nut-fade-up-enter-active,
+.nut-fade-up-leave-active,
+.nut-fade-down-enter-active,
+.nut-fade-down-leave-active,
+.nut-fade-left-enter-active,
+.nut-fade-left-leave-active,
+.nut-fade-right-enter-active,
+.nut-fade-right-leave-active {
+  transition-property: opacity, transform;
+}
+
+.nut-fade-up-enter,
+.nut-fade-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+
+.nut-fade-down-enter,
+.nut-fade-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+
+.nut-fade-left-enter,
+.nut-fade-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+
+.nut-fade-right-enter,
+.nut-fade-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+
+.nut-slide-up-enter-active,
+.nut-slide-up-leave-active,
+.nut-slide-down-enter-active,
+.nut-slide-down-leave-active,
+.nut-slide-left-enter-active,
+.nut-slide-left-leave-active,
+.nut-slide-right-enter-active,
+.nut-slide-right-leave-active {
+  transition-property: transform;
+}
+
+.nut-slide-up-enter,
+.nut-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.nut-slide-down-enter,
+.nut-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.nut-slide-left-enter,
+.nut-slide-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.nut-slide-right-enter,
+.nut-slide-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+}

src/packages/transition/index.ts

@@ -0,0 +1,118 @@
+import { NutComponent } from './../../common/component.ts'
+import { requestAnimationFrame, isObj } from './../../utils'
+
+NutComponent({
+
+  classes: [
+    'enter-class',
+    'enter-active-class',
+    'enter-to-class',
+    'leave-class',
+    'leave-active-class',
+    'leave-to-class',
+  ],
+
+  props: {
+    show: {
+      type: Boolean,
+      value: false,
+      observer: 'observeShow',
+    },
+    // 动画类型  fade fade-up
+    name: {
+      type: String,
+      value: 'fade'
+    },
+    duration: {
+      type: null,
+      value: 300
+    },
+    customStyle: String,
+  },
+
+  data:{
+    classes:[],
+    inited: false,
+    display: false,
+    currentDurtion: 300
+  },
+
+  ready() {
+    if (this.data.show === true) {
+      this.observeShow(true, false);
+    }
+  },
+
+  methods: {
+    // 监听 show 
+    observeShow(value: boolean, old: boolean) {
+      if (value === old) {
+        return;
+      }
+      value ? this.enter() : this.leave();
+    },
+
+    // 进入
+    enter(){
+      const { name, duration } = this.data
+      const currentDuration = isObj(duration) ? duration.enter : duration;
+
+      this.$emit('before-enter')
+      requestAnimationFrame(()=>{
+
+        this.setData({
+          inited: true,
+          display: true,
+          classes: [`nut-${name}-enter`,`nut-${name}-enter-active`, 'enter-class', 'enter-active-class',],
+          currentDuration
+        });
+
+
+        requestAnimationFrame(() => {
+          this.setData({
+            classes: [`nut-${name}-enter-active`,`nut-${name}-enter-to`,'enter-active-class','enter-to-class'],
+          });
+        });
+
+      })
+      
+      
+    },
+
+    // 离开
+    leave(){
+
+      const { name ,duration } = this.data
+      const currentDuration = isObj(duration) ? duration.leave : duration;
+ 
+      requestAnimationFrame(()=>{
+        this.setData({
+          classes: [`nut-${name}-leave`,`nut-${name}-leave-active`,'leave-class', 'leave-active-class',],
+          currentDuration
+        });
+
+        requestAnimationFrame(()=>{
+
+          setTimeout(()=>{
+            this.onTransitionEnd()
+          }, currentDuration)
+
+          this.setData({
+            classes: [`nut-${name}-leave-to`,`nut-${name}-leave-active`,'leave-active-class','leave-to-class'],
+          });
+        })
+      })
+    },
+    // 动画结束
+    onTransitionEnd(){
+
+      const { show, display } = this.data
+
+      if(!show && display){
+        this.setData({
+          display:false
+        })
+      }
+    }
+  },
+});

src/packages/transition/index.wxml

@@ -0,0 +1,7 @@
+<wxs src="./index.wxs" module="computed" />
+<view 
+    wx:if='{{ inited }}' 
+    class="nut-transition block {{ classes }}"
+    style="{{ computed.styled({ currentDuration, display, customStyle }) }}">
+    <slot />
+</view>

src/packages/transition/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var pxCheck = require('../wxs/pxCheck.wxs');
+var style = require('../wxs/style.wxs');
+
+
+function Styled(data) {
+
+    return style([
+        {
+          '-webkit-transition-duration': data.currentDuration + 'ms',
+          'transition-duration': data.currentDuration + 'ms',
+        },
+        data.display ? null : 'display: none',
+        data.customStyle,
+      ]);
+}
+
+module.exports = {
+    styled: Styled
+};

src/utils.js

@@ -1,5 +1,36 @@
-module.exports = {
-  getFlag() {
-    return true
-  },
+
+
+export function getSystemInfoSync() {
+  let systemInfo = null
+  if (systemInfo == null) {
+    systemInfo = wx.getSystemInfoSync();
+  }
+
+  return systemInfo;
 }
+
+// 模拟 浏览器 requestAnimationFrame
+export function requestAnimationFrame(cb) {
+    const systemInfo = getSystemInfoSync();
+  
+    if (systemInfo.platform === 'devtools') {
+      return setTimeout(() => {
+        cb();
+      }, 1000 / 30);
+    }
+  
+    return wx
+      .createSelectorQuery()
+      .selectViewport()
+      .boundingClientRect()
+      .exec(() => {
+        cb();
+      });
+  }
+
+
+export function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+

tools/demo/app.json

@@ -6,7 +6,9 @@
     "pages/basic/pages/cell/index",
     "pages/basic/pages/button/index",
     "pages/basic/pages/divider/index",
-    "pages/basic/pages/grid/index"
+    "pages/basic/pages/grid/index",
+    "pages/basic/pages/overlay/index",
+    "pages/basic/pages/transition/index"
   ],
   "usingComponents": {
     "nut-icon":"./components/packages/icon/icon",
@@ -15,7 +17,9 @@
     "nut-button":"./components/packages/button/index",
     "nut-divider":"./components/packages/divider/index",
     "nut-grid":"./components/packages/grid/index",
-    "nut-grid-item":"./components/packages/grid-item/index"
+    "nut-grid-item":"./components/packages/grid-item/index",
+    "nut-overlay":"./components/packages/overlay/index",
+    "nut-transition":"./components/packages/transition/index"
   },
   "window":{
     "backgroundTextStyle":"light",

tools/demo/nutui.config.js

@@ -60,6 +60,28 @@ module.exports = [
           "desc": "宫格",
           "author": ""
         },
+        {
+          "version": "3.0.0",
+          "name": "Overlay",
+          "taro": true,
+          "sort": 3,
+          "cName": "遮罩层",
+          "type": "component",
+          "show": true,
+          "desc": "遮罩层",
+          "author": ""
+        },
+        {
+          "version": "3.0.0",
+          "name": "Transition",
+          "taro": true,
+          "sort": 3,
+          "cName": "动画",
+          "type": "component",
+          "show": true,
+          "desc": "动画",
+          "author": ""
+        },
       ]
     }
   ]

tools/demo/pages/basic/pages/overlay/index.js

@@ -0,0 +1,5 @@
+
+
+Component({
+  
+})

tools/demo/pages/basic/pages/overlay/index.json

@@ -0,0 +1,5 @@
+
+{
+    "usingComponents": {}
+}
+  

tools/demo/pages/basic/pages/overlay/index.wxml

@@ -0,0 +1,8 @@
+<view class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-button type="primary" >显示遮罩层</nut-button>
+      <nut-overlay></nut-overlay>
+    </nut-cell>
+    
+</view>

tools/demo/pages/basic/pages/overlay/index.wxss

@@ -0,0 +1,16 @@
+.demo-button-row {
+    margin-bottom: 20px;
+}
+
+.demo-button-row2 {
+    margin-bottom: 10px;
+}
+
+.demo-button-row3{
+    margin-bottom: 10px;
+    display:block
+}
+.nut-button {
+    margin-right: 15px;
+
+}

tools/demo/pages/basic/pages/transition/index.js

@@ -0,0 +1,64 @@
+
+
+Component({
+    data:{
+        amishow:false,
+        showCustom:false,
+        name:'fade'
+    },
+
+    methods: {
+        onClickFade() {
+            console.log('点击')
+        this.trigger('fade');
+        },
+    
+        onClickFadeUp() {
+        this.trigger('fade-up');
+        },
+    
+        onClickFadeDown() {
+        this.trigger('fade-down');
+        },
+    
+        onClickFadeLeft() {
+        this.trigger('fade-left');
+        },
+    
+        onClickFadeRight() {
+        this.trigger('fade-right');
+        },
+    
+        onClickSlideUp() {
+        this.trigger('slide-up');
+        },
+    
+        onClickSlideDown() {
+        this.trigger('slide-down');
+        },
+    
+        onClickSlideLeft() {
+        this.trigger('slide-left');
+        },
+    
+        onClickSlideRight() {
+        this.trigger('slide-right');
+        },
+
+        onClickCustom() {
+            this.setData({ showCustom: true });
+
+            setTimeout(()=>{
+                this.setData({  showCustom: false });
+            }, 1000)
+        },
+
+        trigger(name){
+            this.setData({ name, amishow: true });
+
+            setTimeout(()=>{
+                this.setData({  amishow: false });
+            }, 1000)
+        }
+    }
+})

tools/demo/pages/basic/pages/transition/index.json

@@ -0,0 +1,5 @@
+
+{
+    "usingComponents": {}
+}
+  

tools/demo/pages/basic/pages/transition/index.wxml

@@ -0,0 +1,28 @@
+<view class="demo">
+    <h2>基础用法</h2>
+    
+    <nut-cell title="Fade" bindtap="onClickFade"></nut-cell>
+    <nut-cell title="Fade Up" bindtap="onClickFadeUp"></nut-cell>
+    <nut-cell title="Fade Down" bindtap="onClickFadeDown"></nut-cell>
+    <nut-cell title="Fade Left" bindtap="onClickFadeLeft"></nut-cell>
+    <nut-cell title="Fade Right" bindtap="onClickFadeRight"></nut-cell>
+    <nut-cell title="Side Up" bindtap="onClickSlideUp"></nut-cell>
+    <nut-cell title="Side Down" bindtap="onClickSlideDown"></nut-cell>
+    <nut-cell title="Side Left" bindtap="onClickSlideLeft"></nut-cell>
+    <nut-cell title="Side Right" bindtap="onClickSlideRight"></nut-cell>
+    <nut-cell title="Custom" bindtap="onClickCustom"></nut-cell>
+
+
+    <nut-transition show='{{ amishow }}' name="{{ name }}"></nut-transition>
+
+    <nut-transition
+        show="{{ showCustom }}"
+        name=""
+        duration="{{ { enter: 300, leave: 1000 } }}"
+        custom-class="block"
+        enter-class="nut-enter-class"
+        enter-active-class="nut-enter-active-class"
+        leave-active-class="nut-leave-active-class"
+        leave-to-class="nut-leave-to-class"
+    />
+</view>

tools/demo/pages/basic/pages/transition/index.wxss

@@ -0,0 +1,21 @@
+.block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: #1989fa;
+}
+
+.nut-enter-active-class,
+.nut-leave-active-class {
+  transition-property: background-color, transform;
+}
+
+.nut-enter-class,
+.nut-leave-to-class {
+  background-color: red;
+  transform: rotate(-360deg) translate3d(-100%, -100%, 0);
+}
+