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>
    );
  },
});