Javascript 在更新时对spring进行动画处理

我正在使用react-spring尝试使用渐变组件创建一个动画，当组件中的道具发生变化时，渐变组件会淡出，然后返回

通过查看文档，我了解到这可以通过在过渡组件中使用“更新”道具来实现

但是，这似乎只是设置了一个永远不会更改的值（当道具更改时，不透明度设置为0.5）。我不明白这怎么能用来淡出从属组件，并在道具改变时淡出它

转换组件：

<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>

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>
  }
}

场景1:

<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>

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>
  }
}

不同的SlaveComponent道具作为道具传递给从属 组成部分

预计这将触发更新、淡出和淡入

场景2:

<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>

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>
  }
}

从机中的返回条件更改

预计这将淡出第一个返回组件，淡入另一个

---

react-spring 6使这一点变得更容易，因为现在过渡可以是链（字面上是一组一个接一个运行的动画）：您也可以使用插值范围，请参见：