SwitchTransition

Компонент перехода, вдохновленный vue transition modes. Вы можете использовать его, когда хотите управлять рендерингом между переходами состояний. Основываясь на выбранном режиме и дочернем ключе, который является компонентом Transition или CSSTransition, SwitchTransition осуществляет последовательный переход между ними.

Если выбран режим out-in, SwitchTransition ждет, пока старый ребенок не выйдет, а затем вставляет нового ребенка. Если выбран режим in-out, SwitchTransition сначала вставляет нового ребенка, ждет, пока новый ребенок войдет, а затем удаляет старого ребенка.

Если вы хотите, чтобы анимация происходила одновременно (то есть, чтобы старый ребенок удалялся, а новый вставлялся в одно и то же время), вам следует использовать TransitionGroup.

function App() {
  const [state, setState] = useState(false);
  const helloRef = useRef(null);
  const goodbyeRef = useRef(null);
  const nodeRef = state ? goodbyeRef : helloRef;
  return (
    <SwitchTransition>
      <CSSTransition
        key={state ? 'Goodbye, world!' : 'Hello, world!'}
        nodeRef={nodeRef}
        addEndListener={(node, done) =>
          node.addEventListener(
            'transitionend',
            done,
            false
          )
        }
        classNames="fade"
      >
        <button
          ref={nodeRef}
          onClick={() => setState((state) => !state)}
        >
          {state ? 'Goodbye, world!' : 'Hello, world!'}
        </button>
      </CSSTransition>
    </SwitchTransition>
  );
}

.fade-enter {
  opacity: 0;
}
.fade-exit {
  opacity: 1;
}
.fade-enter-active {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
}
.fade-enter-active,
.fade-exit-active {
  transition: opacity 500ms;
}

Пример

Свойства

mode

Режимы перехода. out-in: Сначала происходит переход от текущего элемента, затем, когда он завершен, происходит переход к новому элементу. in-out: Новый элемент сначала переходит внутрь, затем, после завершения, текущий элемент переходит наружу.

• type: 'out-in'|'in-out'
• default: 'out-in'

children

Любой компонент Transition или CSSTransition.

• type: element

Комментарии