easing bugs

[lemonleon]

1. easing 'spring' not support in steps, it will trigger a warning~ like this

const steps = [{
  style: {
    opacity: 0,
  },
  duration: 400,
  easing: 'ease-in-out'
}, {
  style: {
    opacity: 1,
    transform: 'translate(0, 0)',
  },
  duration: 1000,
  easing: 'ease-out'
}, {
  style: {
    transform: 'translate(100px, 100px)',
  },
  duration: 1200,
  easing: 'spring'
}];

render() {
    return (
      <div className="simple">
        <button onClick={this.handleClick.bind(this)}>click me!</button>
        <Animate steps={steps} >
          <div style={{
                        width: 100,
                        height: 100,
                        backgroundColor: 'red'
                    }}
                    >
                    </div>
        </Animate>
      </div>
    );
  }

2. if use steps， children is a function，animation will not be properly implemented' like this

const steps = [{
  style: {
    opacity: 0,
  },
  duration: 400,
  easing: 'ease-in-out'
}, {
  style: {
    opacity: 1,
    transform: 'translate(0, 0)',
  },
  duration: 1000,
  easing: 'ease-out'
}, {
  style: {
    transform: 'translate(100px, 100px)',
  },
  duration: 1200,
  easing: 'ease-in'
}];

render() {
    return (
      <div className="simple">
        <button onClick={this.handleClick.bind(this)}>click me!</button>
        <Animate steps={steps} onAnimationEnd={()=>{console.log('aaa');}}>
           {
                   (json) => {
                        console.log(json);

                        return (
                              <div style={{
                                width: 100,
                                height: 100,
                                backgroundColor: 'red'
                                }}
                               >
                               </div>
                         );
                   }
            }
        </Animate>
      </div>
    );
  }

[Gazareth]

Further to this, there is a bunch of code in easing.js that seems to want to create a JS-based animation, but then in Animate.js a css style animation easing style is passed. I am still learning React but I'd like to be able to have bezier easing so I've been trying to change it but it is not proving easy...

[Gazareth]

I've managed to get bezier easing working in my fork, so I can write:

animationEasing= 'cubic-bezier(0.165, 0.84, 0.44, 1)'

And it gets passed through to the graph components from recharts.

I also had to change the PropTypes in recharts TreeChart.js to allow all strings, but I'll leave that as a local change for now...

[paul-sachs]

@Gazareth PR would be much appreciated. I'd like to use cubic-bezier as well, given that the docs say they support any CSS easing function.

[jasonHzq]

easing could be a function like configureBezier(0.1, 0.1, 0.5, 0.8); in docs or u can write any easing function u want