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 18:59:54 +08:00
parent 62c2bb44bb
commit 83ce8c3bc5
11 changed files with 74 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ Or use script tag to ref it.
name: string
leavingTime?: number
autoRemove?: boolean
appear?: boolean
}
```
@ -47,9 +48,9 @@ Or use script tag to ref it.
```
### Events
* BeforeEnter
* AfterEnter
* before-enter
* after-enter
* enter
* BeforeLeave
* AfterLeave
* before-leave
* after-leave
* leave

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

@ -36,6 +36,7 @@ import '@omiu/transition'
name: string
leavingTime?: number
autoRemove?: boolean
appear?: boolean
}
```
@ -46,9 +47,9 @@ import '@omiu/transition'
}
```
### 事件
* BeforeEnter
* AfterEnter
* before-enter
* after-enter
* enter
* BeforeLeave
* AfterLeave
* before-leave
* after-leave
* leave

2
components/message/src/index.tsx
View File

@ -35,7 +35,7 @@ export default class Message extends WeElement<Props>{
render(props) {
return (
<o-transition onAfterLeave={this.onAfterLeave} leaving-time={props.duration} auto-remove name="fade">
<o-transition onafter-leave={this.onAfterLeave} leaving-time={props.duration} auto-remove name="fade">
<div {...extractClass(props, 'o-message', {
['o-message--' + props.type]: props.type,
'is-closable': props.closable,

9
components/transition/README.md
View File

@ -32,6 +32,7 @@ Or use script tag to ref it.
name: string
leavingTime?: number
autoRemove?: boolean
appear?: boolean
}
```
@ -44,9 +45,9 @@ Or use script tag to ref it.
```
### Events
* BeforeEnter
* AfterEnter
* before-enter
* after-enter
* enter
* BeforeLeave
* AfterLeave
* before-leave
* after-leave
* leave

2
components/transition/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/transition",
"version": "0.0.2",
"version": "0.0.3",
"description": "Define transition animation for entering and leaving",
"docsExtend": {
"cnName": "过渡动画",

2
components/transition/src/index.d.ts vendored
View File

@ -12,12 +12,14 @@ interface Props {
name: string;
leavingTime?: number;
autoRemove?: boolean;
appear?: boolean;
}
export default class Transition extends WeElement<Props> {
static propTypes: {
name: StringConstructor;
leavingTime: NumberConstructor;
autoRemove: BooleanConstructor;
appear: BooleanConstructor;
};
static isLightDom: boolean;
static defaultProps: {

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

@ -1,5 +1,5 @@
/**
* @omiu/transition v0.0.2 http://omijs.org
* @omiu/transition v0.0.3 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
@ -109,25 +109,27 @@ var Transition = /** @class */ (function (_super) {
}
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);
}
});
if (this.props.appear) {
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('before-enter');
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');
this.fire('after-enter');
}.bind(this);
this.once('transitionend', this.callback);
this.once('animationend', this.callback);
@ -138,14 +140,14 @@ var Transition = /** @class */ (function (_super) {
}.bind(this), 0);
};
Transition.prototype.leave = function () {
this.fire('BeforeLeave');
this.fire('before-leave');
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');
this.fire('after-leave');
if (this.props.autoRemove && this.parentNode) {
this.parentNode.removeChild(this);
}
@ -171,7 +173,8 @@ var Transition = /** @class */ (function (_super) {
Transition.propTypes = {
name: String,
leavingTime: Number,
autoRemove: Boolean
autoRemove: Boolean,
appear: Boolean
};
Transition.isLightDom = true;
Transition.defaultProps = {

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

File diff suppressed because one or more lines are too long

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

@ -190,25 +190,27 @@ var Transition = /** @class */ (function (_super) {
}
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);
}
});
if (this.props.appear) {
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('before-enter');
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');
this.fire('after-enter');
}.bind(this);
this.once('transitionend', this.callback);
this.once('animationend', this.callback);
@ -219,14 +221,14 @@ var Transition = /** @class */ (function (_super) {
}.bind(this), 0);
};
Transition.prototype.leave = function () {
this.fire('BeforeLeave');
this.fire('before-leave');
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');
this.fire('after-leave');
if (this.props.autoRemove && this.parentNode) {
this.parentNode.removeChild(this);
}
@ -252,7 +254,8 @@ var Transition = /** @class */ (function (_super) {
Transition.propTypes = {
name: String,
leavingTime: Number,
autoRemove: Boolean
autoRemove: Boolean,
appear: Boolean
};
Transition.isLightDom = true;
Transition.defaultProps = {

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

File diff suppressed because one or more lines are too long

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

@ -17,6 +17,7 @@ interface Props {
name: string
leavingTime?: number
autoRemove?: boolean
appear?: boolean
}
@tag('o-transition')
@ -25,7 +26,8 @@ export default class Transition extends WeElement<Props>{
static propTypes = {
name: String,
leavingTime: Number,
autoRemove: Boolean
autoRemove: Boolean,
appear: Boolean
}
static isLightDom = true
@ -38,18 +40,20 @@ export default class Transition extends WeElement<Props>{
installed() {
domReady(() => {
if(this.props.appear) {
domReady(() => {
this.transitionTarget = this.children[0]
this.transitionTarget = this.children[0]
this.enter()
this.enter()
if (this.props.leavingTime) {
setTimeout(() => {
this.leave()
}, this.props.leavingTime)
}
})
if (this.props.leavingTime) {
setTimeout(() => {
this.leave()
}, this.props.leavingTime)
}
})
}
}
@ -57,7 +61,7 @@ export default class Transition extends WeElement<Props>{
enter() {
this.fire('BeforeEnter')
this.fire('before-enter')
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')
@ -65,7 +69,7 @@ export default class Transition extends WeElement<Props>{
this.callback = function () {
this.transitionTarget.classList.remove(this.props.name + '-enter-active')
this.fire('AfterEnter')
this.fire('after-enter')
}.bind(this)
this.once('transitionend', this.callback)
this.once('animationend', this.callback)
@ -78,7 +82,7 @@ export default class Transition extends WeElement<Props>{
}
leave() {
this.fire('BeforeLeave')
this.fire('before-leave')
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')
@ -88,7 +92,7 @@ export default class Transition extends WeElement<Props>{
this.transitionTarget.classList.remove(this.props.name + '-leave-active')
this.fire('AfterLeave')
this.fire('after-leave')
if (this.props.autoRemove && this.parentNode) {
this.parentNode.removeChild(this)
}