diff --git a/exhibition/demo/table-enter-leave.md b/exhibition/demo/table-enter-leave.md index 0739dc3b..0be034a5 100644 --- a/exhibition/demo/table-enter-leave.md +++ b/exhibition/demo/table-enter-leave.md @@ -20,7 +20,6 @@ import Table from 'antd/lib/table'; import QueueAnim from 'rc-queue-anim'; import { TweenOneGroup } from 'rc-tween-one'; import Button from 'antd/lib/button'; - import 'antd/lib/table/style/index.less'; import 'antd/lib/spin/style/index.less'; import 'antd/lib/pagination/style/index.less'; @@ -44,7 +43,8 @@ class TableEnterLeave extends React.Component { title: 'Action', dataIndex: '', key: 'x', - render: (text, record) => ( this.onDelete(record.key, e)}> + render: (text, record) => ( + this.onDelete(record.key, e)}> Delete ), }, @@ -92,6 +92,8 @@ class TableEnterLeave extends React.Component { address: 'London No. 1 Lake Park', }, ]; + this.currentPage = 1; + this.newPage = 1; this.state = { data: this.data, }; @@ -122,56 +124,27 @@ class TableEnterLeave extends React.Component { this.setState({ data }); } - getBodyWrapper = body => - ( { + // 切换分页去除动画; + if (this.currentPage !== this.newPage) { + this.currentPage = this.newPage; + return body; + } + return ( {body.props.children} ); + } - - pageChange = () => { - this.enterAnim = [ - { opacity: 0, duration: 0 }, - { - height: 0, - duration: 100, - type: 'from', - delay: 250, - ease: 'easeOutQuad', - onComplete: this.onEnd, - }, - { opacity: 1, duration: 250, onComplete: this.reAnim }, - ]; - this.leaveAnim = [ - { duration: 250, opacity: 0 }, - { height: 0, duration: 100, ease: 'easeOutQuad' }, - ]; + pageChange = (pagination) => { + this.newPage = pagination.current; }; - reAnim = () => { - this.enterAnim = [ - { opacity: 0, duration: 0, x: 30, backgroundColor: '#fffeee' }, - { - height: 0, - duration: 200, - type: 'from', - delay: 250, - ease: 'easeOutQuad', - onComplete: this.onEnd, - }, - { opacity: 1, x: 0, duration: 250, ease: 'easeOutQuad' }, - { delay: 1000, backgroundColor: '#fff' }, - ]; - this.leaveAnim = [ - { duration: 250, opacity: 0 }, - { height: 0, duration: 200, ease: 'easeOutQuad' }, - ]; - } - render() { return (
diff --git a/exhibition/js/table-enter-leave.jsx b/exhibition/js/table-enter-leave.jsx index ece98c9d..5aea52e3 100644 --- a/exhibition/js/table-enter-leave.jsx +++ b/exhibition/js/table-enter-leave.jsx @@ -27,7 +27,8 @@ export default class TableEnterLeave extends React.Component { title: 'Action', dataIndex: '', key: 'x', - render: (text, record) => ( this.onDelete(record.key, e)}> + render: (text, record) => ( + this.onDelete(record.key, e)}> Delete ), }, @@ -75,6 +76,8 @@ export default class TableEnterLeave extends React.Component { address: 'London No. 1 Lake Park', }, ]; + this.currentPage = 1; + this.newPage = 1; this.state = { data: this.data, }; @@ -105,56 +108,27 @@ export default class TableEnterLeave extends React.Component { this.setState({ data }); } - getBodyWrapper = body => - ( { + // 切换分页去除动画; + if (this.currentPage !== this.newPage) { + this.currentPage = this.newPage; + return body; + } + return ( {body.props.children} ); + } - - pageChange = () => { - this.enterAnim = [ - { opacity: 0, duration: 0 }, - { - height: 0, - duration: 100, - type: 'from', - delay: 250, - ease: 'easeOutQuad', - onComplete: this.onEnd, - }, - { opacity: 1, duration: 250, onComplete: this.reAnim }, - ]; - this.leaveAnim = [ - { duration: 250, opacity: 0 }, - { height: 0, duration: 100, ease: 'easeOutQuad' }, - ]; + pageChange = (pagination) => { + this.newPage = pagination.current; }; - reAnim = () => { - this.enterAnim = [ - { opacity: 0, duration: 0, x: 30, backgroundColor: '#fffeee' }, - { - height: 0, - duration: 200, - type: 'from', - delay: 250, - ease: 'easeOutQuad', - onComplete: this.onEnd, - }, - { opacity: 1, x: 0, duration: 250, ease: 'easeOutQuad' }, - { delay: 1000, backgroundColor: '#fff' }, - ]; - this.leaveAnim = [ - { duration: 250, opacity: 0 }, - { height: 0, duration: 200, ease: 'easeOutQuad' }, - ]; - } - render() { return (