DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

publish(@omiu/transition)

This commit is contained in:
dntzhang 2020-05-01 09:20:30 +08:00
parent 6be2512e2a
commit 2964557362
13 changed files with 343 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/docs-src/src/docs/en/transition.md
View File

@ -48,12 +48,8 @@ Or use script tag to ref it.
### Events
* BeforeEnter
* beforeEnter
* AfterEnter
* afterEnter
* enter
* BeforeLeave
* beforeLeave
* AfterLeave
* afterLeave
* leave

4
components/docs-src/src/docs/zh-cn/transition.md
View File

@ -47,12 +47,8 @@ import '@omiu/transition'
```
### 事件
* BeforeEnter
* beforeEnter
* AfterEnter
* afterEnter
* enter
* BeforeLeave
* beforeLeave
* AfterLeave
* afterLeave
* leave

18
components/dready/index.esm.js Normal file
View File

@ -0,0 +1,18 @@
const readyCallbacks = []
document.addEventListener('DOMContentLoaded', () => {
domReady.done = true
readyCallbacks.forEach(callback => {
callback()
})
})
export default function domReady(callback) {
if (domReady.done) {
callback()
return
}
readyCallbacks.push(callback)
}
domReady.done = false

40
components/dready/index.js Normal file
View File

@ -0,0 +1,40 @@
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.domReady = factory();
}
}(this, function () {
const readyCallbacks = []
document.addEventListener('DOMContentLoaded', () => {
domReady.done = true
readyCallbacks.forEach(callback => {
callback()
})
})
function domReady(callback) {
if (domReady.done) {
callback()
return
}
readyCallbacks.push(callback)
}
domReady.done = false
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return domReady
}));

13
components/dready/package.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "dready",
"version": "0.0.1",
"description": "Dom Ready.",
"main": "src/index.js",
"module": "src/index.esm.js",
"scripts": {},
"keywords": [],
"author": "dntzhang",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

4
components/transition/README.md
View File

@ -45,12 +45,8 @@ Or use script tag to ref it.
### Events
* BeforeEnter
* beforeEnter
* AfterEnter
* afterEnter
* enter
* BeforeLeave
* beforeLeave
* AfterLeave
* afterLeave
* leave

28
components/transition/demos/js-demo/index.html
View File

@ -18,23 +18,21 @@
<script src="../../../icon/ac-unit-outlined.js"></script>
<script src="../../../icon/accessible-rounded.js"></script>
<style>
o-button {
margin-top: 10px;
.fade-leave-to,
.fade-enter {
opacity: 0;
transform: translateX(15px);
}
.fade-leave-active,
.fade-enter-active {
transition: all 500ms ease-in;
}
</style>
<!-- <div>
<o-message type="success" center message="复制标签成功 <xx-xx></xx-xx>"></o-message>
</div> -->
<script>
function sucAlert(msg) {
document.body.innerHTML += ' <o-message type="success" center message="' + msg + '"></o-message>'
}
sucAlert('复制标签成功22 <xx-xx></xx-xx>')
</script>
<o-transition name="fade" leaving-time="3000">
<div>aaaa</div>
</o-transition>
</body>
</html>

3
components/transition/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/transition",
"version": "0.0.1",
"version": "0.0.2",
"description": "Define transition animation for entering and leaving",
"docsExtend": {
"cnName": "过渡动画",
@ -96,6 +96,7 @@
},
"dependencies": {
"@omiu/common": "latest",
"dready": "latest",
"omi": "latest"
}
}

71
components/transition/src/index.esm.js
View File

@ -1,5 +1,5 @@
/**
* @omiu/transition v0.0.1 http://omijs.org
* @omiu/transition v0.0.2 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
@ -44,6 +44,55 @@ function __decorate(decorators, target, key, desc) {
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var _dready_0_0_1_dready = createCommonjsModule(function (module, exports) {
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
{
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
}
}(commonjsGlobal, function () {
const readyCallbacks = [];
document.addEventListener('DOMContentLoaded', () => {
domReady.done = true;
readyCallbacks.forEach(callback => {
callback();
});
});
function domReady(callback) {
if (domReady.done) {
callback();
return
}
readyCallbacks.push(callback);
}
domReady.done = false;
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return domReady
}));
});
var domReady = /*#__PURE__*/Object.freeze({
__proto__: null,
'default': _dready_0_0_1_dready,
__moduleExports: _dready_0_0_1_dready
});
/**
* o-transition element based on vue-transition
* Tom Fales (@enlightenmentor)
@ -60,17 +109,18 @@ var Transition = /** @class */ (function (_super) {
}
Transition.prototype.installed = function () {
var _this = this;
this.transitionTarget = this.childNodes[0];
this.enter();
if (this.props.leavingTime) {
setTimeout(function () {
_this.leave();
}, this.props.leavingTime);
}
domReady(function () {
_this.transitionTarget = _this.children[0];
_this.enter();
if (_this.props.leavingTime) {
setTimeout(function () {
_this.leave();
}, _this.props.leavingTime);
}
});
};
Transition.prototype.enter = function () {
this.fire('BeforeEnter');
this.fire('beforeEnter');
this.transitionTarget.classList.remove(this.props.name + '-leave-active');
this.transitionTarget.classList.remove(this.props.name + '-leave-to');
this.transitionTarget.classList.add(this.props.name + '-enter');
@ -78,7 +128,6 @@ var Transition = /** @class */ (function (_super) {
this.callback = function () {
this.transitionTarget.classList.remove(this.props.name + '-enter-active');
this.fire('AfterEnter');
this.fire('afterEnter');
}.bind(this);
this.once('transitionend', this.callback);
this.once('animationend', this.callback);
@ -90,7 +139,6 @@ var Transition = /** @class */ (function (_super) {
};
Transition.prototype.leave = function () {
this.fire('BeforeLeave');
this.fire('beforeLeave');
this.transitionTarget.classList.remove(this.props.name + '-enter-active');
this.transitionTarget.classList.remove(this.props.name + '-enter-to');
this.transitionTarget.classList.add(this.props.name + '-leave');
@ -98,7 +146,6 @@ var Transition = /** @class */ (function (_super) {
this.callback = function (e) {
this.transitionTarget.classList.remove(this.props.name + '-leave-active');
this.fire('AfterLeave');
this.fire('afterLeave');
if (this.props.autoRemove && this.parentNode) {
this.parentNode.removeChild(this);
}

2
components/transition/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

194
components/transition/src/index.js
View File

@ -1,13 +1,13 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
module.exports = factory(require("omi"));
else if(typeof define === 'function' && define.amd)
define([], factory);
define(["omi"], factory);
else if(typeof exports === 'object')
exports["OTransition"] = factory();
exports["OTransition"] = factory(require("omi"));
else
root["OTransition"] = factory();
})(this, function() {
root["OTransition"] = factory(root["Omi"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -91,19 +91,191 @@ return /******/ (function(modules) { // webpackBootstrap
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/msg.tsx");
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/msg.tsx":
/*!*********************!*\
!*** ./src/msg.tsx ***!
\*********************/
/***/ "./node_modules/_dready@0.0.1@dready/index.js":
/*!****************************************************!*\
!*** ./node_modules/_dready@0.0.1@dready/index.js ***!
\****************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (true) {
// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {}
}(this, function () {
const readyCallbacks = []
document.addEventListener('DOMContentLoaded', () => {
domReady.done = true
readyCallbacks.forEach(callback => {
callback()
})
})
function domReady(callback) {
if (domReady.done) {
callback()
return
}
readyCallbacks.push(callback)
}
domReady.done = false
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return domReady
}));
/***/ }),
/***/ "./src/index.tsx":
/*!***********************!*\
!*** ./src/index.tsx ***!
\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* o-transition element based on vue-transition
* Tom Fales (@enlightenmentor)
* Licensed under the MIT License
* https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE
*
* modified by dntzhang
*
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
//todo duration and delay support
var omi_1 = __webpack_require__(/*! omi */ "omi");
var domReady = __webpack_require__(/*! dready */ "./node_modules/_dready@0.0.1@dready/index.js");
var Transition = /** @class */ (function (_super) {
__extends(Transition, _super);
function Transition() {
return _super !== null && _super.apply(this, arguments) || this;
}
Transition.prototype.installed = function () {
var _this = this;
domReady(function () {
_this.transitionTarget = _this.children[0];
_this.enter();
if (_this.props.leavingTime) {
setTimeout(function () {
_this.leave();
}, _this.props.leavingTime);
}
});
};
Transition.prototype.enter = function () {
this.fire('BeforeEnter');
this.transitionTarget.classList.remove(this.props.name + '-leave-active');
this.transitionTarget.classList.remove(this.props.name + '-leave-to');
this.transitionTarget.classList.add(this.props.name + '-enter');
this.transitionTarget.classList.add(this.props.name + '-enter-active');
this.callback = function () {
this.transitionTarget.classList.remove(this.props.name + '-enter-active');
this.fire('AfterEnter');
}.bind(this);
this.once('transitionend', this.callback);
this.once('animationend', this.callback);
window.setTimeout(function () {
this.transitionTarget.classList.remove(this.props.name + '-enter');
this.transitionTarget.classList.add(this.props.name + '-enter-to');
this.fire('enter');
}.bind(this), 0);
};
Transition.prototype.leave = function () {
this.fire('BeforeLeave');
this.transitionTarget.classList.remove(this.props.name + '-enter-active');
this.transitionTarget.classList.remove(this.props.name + '-enter-to');
this.transitionTarget.classList.add(this.props.name + '-leave');
this.transitionTarget.classList.add(this.props.name + '-leave-active');
this.callback = function (e) {
this.transitionTarget.classList.remove(this.props.name + '-leave-active');
this.fire('AfterLeave');
if (this.props.autoRemove && this.parentNode) {
this.parentNode.removeChild(this);
}
}.bind(this);
this.once('transitionend', this.callback);
this.once('animationend', this.callback);
window.setTimeout(function () {
this.transitionTarget.classList.remove(this.props.name + '-leave');
this.transitionTarget.classList.add(this.props.name + '-leave-to');
this.fire('leave');
}.bind(this), 0);
};
Transition.prototype.once = function (name, callback) {
var wrapCall = function () {
this.removeEventListener(name, wrapCall);
callback();
}.bind(this);
this.addEventListener(name, wrapCall);
};
Transition.prototype.render = function () {
return;
};
Transition.propTypes = {
name: String,
leavingTime: Number,
autoRemove: Boolean
};
Transition.isLightDom = true;
Transition.defaultProps = {
name: 'o'
};
Transition = __decorate([
omi_1.tag('o-transition')
], Transition);
return Transition;
}(omi_1.WeElement));
exports.default = Transition;
/***/ }),
/***/ "omi":
/*!******************************************************************************!*\
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
\******************************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
throw new Error("Module build failed (from ./node_modules/_ts-loader@5.4.5@ts-loader/index.js):\nError: ENOENT: no such file or directory, open '/Users/dntzhang/Documents/GitHub/omi/components/transition/src/msg.tsx'");
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
/***/ })

2
components/transition/src/index.js.map
View File

File diff suppressed because one or more lines are too long

24
components/transition/src/index.tsx
View File

@ -11,6 +11,7 @@
//todo duration and delay support
import { tag, WeElement } from 'omi'
import * as domReady from 'dready'
interface Props {
name: string
@ -37,14 +38,19 @@ export default class Transition extends WeElement<Props>{
installed() {
this.transitionTarget = this.childNodes[0]
this.enter()
domReady(() => {
this.transitionTarget = this.children[0]
this.enter()
if (this.props.leavingTime) {
setTimeout(() => {
this.leave()
}, this.props.leavingTime)
}
})
if (this.props.leavingTime) {
setTimeout(() => {
this.leave()
}, this.props.leavingTime)
}
}
callback: () => void
@ -52,7 +58,6 @@ export default class Transition extends WeElement<Props>{
enter() {
this.fire('BeforeEnter')
this.fire('beforeEnter')
this.transitionTarget.classList.remove(this.props.name + '-leave-active')
this.transitionTarget.classList.remove(this.props.name + '-leave-to')
this.transitionTarget.classList.add(this.props.name + '-enter')
@ -61,7 +66,6 @@ export default class Transition extends WeElement<Props>{
this.callback = function () {
this.transitionTarget.classList.remove(this.props.name + '-enter-active')
this.fire('AfterEnter')
this.fire('afterEnter')
}.bind(this)
this.once('transitionend', this.callback)
this.once('animationend', this.callback)
@ -75,7 +79,6 @@ export default class Transition extends WeElement<Props>{
leave() {
this.fire('BeforeLeave')
this.fire('beforeLeave')
this.transitionTarget.classList.remove(this.props.name + '-enter-active')
this.transitionTarget.classList.remove(this.props.name + '-enter-to')
this.transitionTarget.classList.add(this.props.name + '-leave')
@ -86,7 +89,6 @@ export default class Transition extends WeElement<Props>{
this.transitionTarget.classList.remove(this.props.name + '-leave-active')
this.fire('AfterLeave')
this.fire('afterLeave')
if (this.props.autoRemove && this.parentNode) {
this.parentNode.removeChild(this)
}