React: Spring transition not behaving properly

Question

I recently got started with both React and JavaScript. I've been reading the Spring API docs for the Transition component, and ended up with this piece of code when doing some tests. Now, I expected a smooth transition, but got the following sequence:

When switch changes, the mounted element abruptly appears.
Some time goes by (this is dependent on the config that I choose)
The one unmounted disappears (abruptly as well)

For what I read in the docs, I'm not able to see what I'm doing wrong here, so any help is more than welcome. I've tested different configs and always get that sequence.

PS: Content is just a plain div that takes its background color as prop, so nothing fancy there.

import React from 'react';
import './App.css';
import Content from './components/content';
import {Transition, config} from 'react-spring/renderprops';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      switch: false
    };
  }

  render() {
    return (
      <div id="container" onClick={() => {this.setState({switch: !this.state.switch})}}>
        <Transition
        config={config.slow}
        items={this.state.switch}
        from={{opacity: 0}}
        enter={{opacity: 1}}
        leave={{opacity: 0}}>
        {s => s ? () => <Content backgroundColor="rgb(37, 95, 142)"></Content>
                : () => <Content backgroundColor="rgb(37, 142, 118)"></Content>}
        </Transition>
      </div>
    );
  }
}

export default App;

Thanks!

unable to run your code, mate, can you create live example here? I started but seems I missing something https://stackblitz.com/edit/react-zwjsnw - you can fork this and then edit — godblessstrawberry, Jun 06 '20 at 06:50
@godblessstrawberry there, fixed it! [Link](https://stackblitz.com/edit/react-cknafe?file=index.js) — nachosanchezz, Jun 06 '20 at 18:45

score 1 · Accepted Answer · answered Jun 06 '20 at 20:23

The Transtition changes the opacity in your example, but you never give the changed values to you rendered component. It missing the prop parameter in the arrow function. You should add this prop to the style property to your component.

For example:

props => (<Content props={props} backgroundColor="rgb(37, 95, 142)" />)

And the Component is something like this:

const Content = ({ backgroundColor, props }) => (
  <animated.div style={{ backgroundColor, ...props }}>Content</animated.div>
);

And now you can see the opacity change.

I also used animated.div here and added the native poperty to Transition for better performance.

Here is my example: https://codesandbox.io/s/ecstatic-wood-7p1ym?file=/src/App.js

React: Spring transition not behaving properly

1 Answers1