基于带有 react-spring 的道具动画条件渲染

2024-05-17 • 问答

我想使用 react-spring 为表单中的多个步骤设置动画。这是我目前所拥有的。

import React,{ useState} from 'react';
import { animated,useSpring } from 'react-spring';

const AnimatedContainer = animated.div
function MultiStepForm() {
  const [step,setStep] = useState(1);
 
  const style = useSpring({
    to: {opacity: 1},from: {opacity: 0},config: {
        duration: 200
    }
})
  return (
    <AnimatedContainer style={style}>
      {...conditional rendering based on step state}
    </AnimatedContainer>

  )
}

我多次阅读文档，但仍然不知道如何执行此操作。我以前使用过 react-transition group，使用起来非常简单，但对于这个项目，我必须使用 react-spring。如果我现在陷入困境，我将不胜感激。

我设法为遇到相同问题的任何人做一些事情。我没有使用 useSpring，而是使用 useTransition。

const [step,setStep] = useStep(1); 

const transRef = useSpringRef();

useEffect(() => {
    transRef.start();
},[step]);

const transitions = useTransition(step,{
    ref: transRef,keys: null,from: {
        ...transition styles
    },enter: { opacity: 1,transform: 'translateX(0px)' },leave: {
        ...transition styles
    },trail: 300,// this is delay between the leave and enter animation - enter will happen 300ms after leave in this case.
    config: { duration: 150 }
});

然后像这样渲染组件

function MultiStepForm() {
  return (
  transitions((props,step) => { // props=transition styles defined in useTransition
    step === 1 && (
        <animated.div style={props}><Step1 /></animated.div> and so on.
        )
  })
)
}

基于带有 react-spring 的道具动画条件渲染

PEIYOUXIANG 回答：基于带有 react-spring 的道具动画条件渲染

大家都在问