使用react-spring实现基于道具的条件渲染动画

Question

我想用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。我非常感谢任何形式的帮助，因为我现在被困住了。

Answer 1

我设法为任何有同样问题的人做了一些事情。我使用useTransition而不是useSpring。

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