Question

我正在使用react-spring尝试使用过渡组件创建动画，该组件会淡出然后在组件中的道具发生更改时又返回。

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

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

转换组件：

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

从站中的返回条件更改
期望它会淡出第一个返回分量，并淡入另一个。

Answer 1

react-spring 6使此操作变得容易一些，因为现在过渡可以是链式的（从字面上看，是一系列动画，一个接一个地运行）：http://react-spring.surge.sh/transition您也可以为此使用插值范围，请参见：{ {3}}

在更新时反应弹簧动画

1 个答案: