在更新时反应弹簧动画答案

【问题标题】：React spring animate on update在更新时反应弹簧动画
【发布时间】：2019-03-28 18:13:52
【问题描述】：

我正在使用 react-spring 来尝试使用 Transition 组件创建一个动画，该组件会在组件中的道具发生变化时淡出然后重新进入。

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

但是，这似乎只是设置了一个永远不会改变的值（当道具改变时，不透明度设置为 0.5）。我不明白如何使用它来淡出 Slave 组件并在它的 props 更改时将其淡出。

过渡组件：

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

SCSS

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

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

场景 1：

不同的 SlaveComponent 道具作为道具传递给从站组件。
预计这会触发更新、淡出和淡入。

场景 2：

Slave 中的返回条件更改
预计这会淡出第一个返回组件并淡入另一个组件。

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案1】：

react-spring 6 使这更容易一些，因为现在转换可以是链（字面意思是一个接一个运行的动画数组）：http://react-spring.surge.sh/transition 您也可以为此使用插值范围，请参阅：http://react-spring.surge.sh/perf#interpolation

【讨论】：