React spring animate on update

Question

I have am using react-spring to try and create an animation using the Transition component that fades out and then back in when props in a component change.

From looking at the documentation I understand that this can be achieved by using the "update" prop in the Transition component.

However, this only seems to set a value which never changes (opacity is set to 0.5 when props change). I don't understand how this can be used to fade out the Slave component and fade it back when it's props change.

Transition component:

<div className="panel-with-sidepane__slave">
  <Transition
    native
    from={{ opacity: 0 }}
    enter={{ opacity: 1 }}
    leave={{ opacity: 0 }}
    update={{ opacity: 0.5 }}
    to={{ opacity: 1 }}
  >
    {styles => {
      return (
        <Slave
          style={styles}
          SlaveComponent={SlaveComponent}
          isMobile={isMobile}
          setWrapperRef={this.props.setWrapperRef}
          onFocus={this.props.onFocus}
          onBlur={this.props.onBlur}
          fallbackTxt={fallbackTxt}
          activeRowIndex={activeRowIndex}
        />
      )
    }
    }
  </Transition>
</div>

Component to animate when it's return changes / props change:

const Slave = ({
  activeRowIndex,
  fallbackTxt,
  isMobile,
  onBlur,
  onFocus,
  setWrapperRef,
  SlaveComponent,
  style
}) => {
  if (!isMobile && typeof activeRowIndex === 'number') {
    return (
      <animated.div
        style={style}
        ref={ref => setWrapperRef(ref)}
        onFocus={onFocus}
        onBlur={onBlur}
        className="panel-with-sidepane__slave__animation-container"
      >
        {SlaveComponent}
      </animated.div>
    )
  } else if (!isMobile && typeof activeRowIndex === 'undefined') {
    return <div style={style} className="panel-with-sidepane__slave__animation-container panel-with-sidepane__fallback">{fallbackTxt}</div>
  }
}

SCSS

.panel-with-sidepane__slave {
  position: relative;
  ...redacted
}

.panel-with-sidepane__slave__animation-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

Scenario 1:

Different SlaveComponent prop gets passed as a prop to the Slave component.
Expect this to trigger an update, fade out and fade back in.

Scenario 2:

Return condition changes in Slave
Expect this to fade out first return component and fade in the other one.

hpalu hpalu · Accepted Answer · 2018-10-26T09:14:08

react-spring 6 makes this a little easier because now transitions can be chains (literally, an array of animations that are run one after another): http://react-spring.surge.sh/transition You can also use interpolation ranges for this, see: http://react-spring.surge.sh/perf#interpolation

React spring animate on update

1 Answers