react 动画 react-motion

安装包

npm install react-motion --save

简单示例

import React from 'react' import IComponent from 'BaseCMSManage/Components/IETemplateComponents/IEAnimation/IComponent' import { Motion, spring, presets } from 'react-motion' class IEAnimation extends IComponent { constructor(props) { super(props); this.state = { value: 0 } } componentDidMount() { this.setState({ value: 100 }); } render() { // presets 是预设的几种动画类型 // 动画执行过程 // 初始化时 x = 0， // 当我们 setState 时，x = 100 // 这时将产生一个 x 从 0 到 100 的一个变化，如（0, 20, 40, 60, 80, 100）,如何变化取决于我们的预设 presets // 每次变化将会调用我们的 动画组件 生成组件 return (<div> <Motion style={{ x: spring(this.state.value, presets.wobbly) }}> {/* 动画组件 */} {interpolatingStyle => { return ( <div style={{ left: `${interpolatingStyle.x - 100}%`, position: 'relative' }}> { this.props.children } </div> ) }} </Motion> </div>); } }

联动动画StaggeredMotion组件

联动动画执行过程n次变化如下： 1.组件1[x=10]，组件2[x=0]，组件3[x=0] 2.组件1[x=20]，组件2[x=10], 组件3[x=0] 3.组件1[x=30]，组件2[x=20]，组件3[x=10]

示例：

import React from 'react' import IComponent from 'BaseCMSManage/Components/IETemplateComponents/IEAnimation/IComponent' import { Motion, spring, presets, StaggeredMotion } from 'react-motion' class IEAnimation extends IComponent { constructor(props) { super(props); this.state = { value: 0 } } componentDidMount() { this.setState({ value: 100 }); } render() { let childrens = [ {childVal: this.state.value}, {childVal: this.state.value}, {childVal: this.state.value} ] return (<div> <StaggeredMotion defaultStyles={childrens} styles={prevInterpolatedStyles => { // 这一步很重要，prevInterpolatedStyles 是上一次变化的 styles // 而我们要返回的是这一次变化的 styles // 我们这一次变化的 styles，要基于上一次变化 // 也就是说这一次的 styles[1] 要等于上一次的 prevInterpolatedStyles[0]，同理 2->1，3->2 ... return prevInterpolatedStyles.map((_, i) => { return i === 0 ? {childVal: spring(this.state.value)} : {childVal: spring(prevInterpolatedStyles[i - 1].childVal, presets.wobbly)} }) }} > {interpolatingStyles => { return <> { interpolatingStyles.map((e, i)=>( <div style={{ left: `${e.childVal - 100}%`, position: 'relative' }}></div> )) } </> }} </StaggeredMotion> </div>); } }

挂载卸载动画TransitionMotion

没试过，直接使用官方示例：

import createReactClass from 'create-react-class'; const Demo = createReactClass({ getInitialState() { return { items: [{key: 'a', size: 10}, {key: 'b', size: 20}, {key: 'c', size: 30}], }; }, componentDidMount() { this.setState({ items: [{key: 'a', size: 10}, {key: 'b', size: 20}], // remove c. }); }, willLeave() { // triggered when c's gone. Keeping c until its width/height reach 0. return {width: spring(0), height: spring(0)}; }, render() { return ( <TransitionMotion willLeave={this.willLeave} styles={this.state.items.map(item => ({ key: item.key, style: {width: item.size, height: item.size}, }))}> {interpolatedStyles => // first render: a, b, c. Second: still a, b, c! Only last one's a, b. <div> {interpolatedStyles.map(config => { return <div key={config.key} style={{...config.style, border: '1px solid'}} /> })} </div> } </TransitionMotion> ); }, });