From b5f7de3198606b0329c06a2df3eea0194be94e1b Mon Sep 17 00:00:00 2001 From: ShanaMaid Date: Mon, 9 Jul 2018 16:27:49 +0800 Subject: [PATCH] =?UTF-8?q?feat(scale):=20=E6=B7=BB=E5=8A=A0scale=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Transitions/Expand.tsx | 1 + components/Transitions/Scale.tsx | 103 ++++++++++++++++++ components/Transitions/Slide.tsx | 1 + components/Transitions/index.tsx | 2 + .../Transitions/demo/transitionsDemo.tsx | 2 +- .../Transitions/demo/transitionsScale.md | 1 + .../Transitions/demo/transitionsScale.tsx | 42 +++++++ docs/pages/Transitions/index.tsx | 6 + 8 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 components/Transitions/Scale.tsx create mode 100644 docs/pages/Transitions/demo/transitionsScale.md create mode 100644 docs/pages/Transitions/demo/transitionsScale.tsx diff --git a/components/Transitions/Expand.tsx b/components/Transitions/Expand.tsx index 5643a96..515b41d 100644 --- a/components/Transitions/Expand.tsx +++ b/components/Transitions/Expand.tsx @@ -40,6 +40,7 @@ export class Expand extends Component { timeout={timeout} in={active} mountOnEnter + unmountOnExit appear onEnter={() => { this.refContainer.style.height = '0px'; diff --git a/components/Transitions/Scale.tsx b/components/Transitions/Scale.tsx new file mode 100644 index 0000000..50457c2 --- /dev/null +++ b/components/Transitions/Scale.tsx @@ -0,0 +1,103 @@ + +import {Component} from 'react'; +import * as React from 'react'; +import {IBaseComponent} from '../template/component'; +import {Transition} from 'react-transition-group'; + +export interface IScaleProps extends IBaseComponent { + /** + * 动画时间 ms + */ + timeout: number; + /** + * 激活状态 + */ + active: boolean; +} + +export interface IScaleState { + +} + +/** + * **组件中文名称**-组件描述。 + */ +export class Scale extends Component { + refChild: HTMLElement; + + static defaultProps = { + }; + + render() { + const { + active, timeout, children, + } = this.props; + + const transition = { + exit: 'scale(0)', + enter: 'scale(1)', + }; + + return ( + { + this.refChild.style.transform = transition.exit; + this.refChild.style.opacity = '0'; + this.refChild.style.display = null; + }} + onEntering={() => { + setTimeout(() => { + this.refChild.style.transform = transition.enter; + this.refChild.style.opacity = '1'; + }, 0); + }} + onEntered={() => { + this.refChild.style.transform = null; + this.refChild.style.opacity = null; + }} + onExit={() => { + this.refChild.style.transform = transition.enter; + this.refChild.style.opacity = '1'; + }} + onExiting={() => { + setTimeout(() => { + this.refChild.style.transform = transition.exit; + this.refChild.style.opacity = '0'; + }, 0); + }} + onExited={() => { + this.refChild.style.transform = null; + this.refChild.style.opacity = null; + this.refChild.style.display = 'none'; + }} + > + { + () => { + const child = React.Children.only(children); + return React.cloneElement(child, { + style: { + ...child.props.style, + transition: `all ${timeout / 1000}s cubic-bezier(.645,.045,.355,1)`, + }, + ref: (v: HTMLElement) => { + if (v) { + this.refChild = v; + } + if (child.props.ref) { + child.props.ref(); + } + } + }); + } + } + + ); + } +} + +export default Scale; diff --git a/components/Transitions/Slide.tsx b/components/Transitions/Slide.tsx index 8dd0ac3..0644a6d 100644 --- a/components/Transitions/Slide.tsx +++ b/components/Transitions/Slide.tsx @@ -60,6 +60,7 @@ export class Slide extends Component { timeout={timeout} in={active} mountOnEnter + unmountOnExit appear onEnter={() => { this.refChild.style.transform = transition[direction].exit; diff --git a/components/Transitions/index.tsx b/components/Transitions/index.tsx index fbfae51..971253a 100644 --- a/components/Transitions/index.tsx +++ b/components/Transitions/index.tsx @@ -1,9 +1,11 @@ import Expand from './Expand'; import Slide from './Slide'; +import Scale from './Scale'; const Transitions = { Expand, Slide, + Scale, }; export default Transitions; diff --git a/docs/pages/Transitions/demo/transitionsDemo.tsx b/docs/pages/Transitions/demo/transitionsDemo.tsx index 2696e33..49c1377 100644 --- a/docs/pages/Transitions/demo/transitionsDemo.tsx +++ b/docs/pages/Transitions/demo/transitionsDemo.tsx @@ -22,7 +22,7 @@ export default class App extends React.Component { lineHeight: `${height}px`, }; return ( -
+
{ + this.setState({ + active: checked, + }); + } + + render () { + const height = 200; + const {active} = this.state; + const style: React.CSSProperties = { + height, + lineHeight: `${height}px`, + }; + return ( +
+ 开/关 + +
+ 放缩 +
+ +
+ ) + } +} diff --git a/docs/pages/Transitions/index.tsx b/docs/pages/Transitions/index.tsx index a1d725d..0055954 100644 --- a/docs/pages/Transitions/index.tsx +++ b/docs/pages/Transitions/index.tsx @@ -14,6 +14,10 @@ import TransitionsCustom from './demo/transitionsCustom'; import * as transitionsCustomMd from './demo/transitionsCustom.md'; const transitionsCustomCode = require('!raw-loader!./demo/transitionsCustom'); +import TransitionsScale from './demo/transitionsScale'; +import * as transitionsScaleMd from './demo/transitionsScale.md'; +const transitionsScaleCode = require('!raw-loader!./demo/transitionsScale'); + export default class TransitionsPage extends Component { render() { return ( @@ -22,6 +26,8 @@ export default class TransitionsPage extends Component { } code={transitionsDemoCode}/> } code={transitionsCustomCode}/> + + } code={transitionsScaleCode}/>
)