Реагируй анимацию весны на обновление - PullRequest
Новая
       24

Реагируй анимацию весны на обновление

0 голосов
/ 24 октября 2018

Я использую реагирующую пружину, чтобы попытаться создать анимацию с использованием компонента «Переход», который постепенно исчезает, а затем возвращается при смене реквизита в компоненте.

Глядя на документацию, я понимаю, что этого можно достичь, используя реквизит "update" в компоненте Transition.

Однако, кажется, что это только устанавливает значение, которое никогда не изменяется (непрозрачность устанавливается на 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:

  1. Различные SlaveComponent пропускаются в качестве опоры для подчиненного компонента.
  2. Ожидается, что это вызовет обновление, исчезновение и исчезновение обратно.

Сценарий 2:

  1. Изменения условий возврата в подчиненном устройстве
  2. Ожидайте, что это приведет к исчезновению первого возвращаемого компонента и исчезновению в другом.

1 Ответ

0 голосов
/ 26 октября 2018

Reaction-Spring 6 делает это немного проще, потому что теперь переходы могут быть цепочками (буквально, массив анимаций, которые запускаются одна за другой): http://react -spring.surge.sh / transition Для этого вы также можете использовать диапазоны интерполяции, см .: http://react -spring.surge.sh / perf # interpolation

...