Question

我有一个react组件，当组件的状态改变时，我想对其进行动画处理。

我正在使用useReducer const [state, dispatch] = useReducer(reducer, initialState); 然后单击，将state.isOpen从false更新为true，反之亦然。在同一组件中，我拥有

const wrapperStyles = useSpring({
    transform: state.isOpen ? 'translate3d(0, 0, -300px)' : 'translate3d(0, 0, 0)'
  });

最后，组件像这样<StyledWrapper style={wrapperStyles}>消耗它我希望状态改变时可以应用和更改转换，但事实并非如此。我不知道我在做什么错，我正在按照他们在网站上的简单说明进行操作。

编辑：我尝试使用opacity而不是transform，它工作正常，所以我在css转换中做错了吗？

Answer 1

您已阅读此页。
我搜索react-spring，
如果使用转换，则使用import {useTransition, animated} from 'react-spring'

不是useSpring()

https://www.react-spring.io/docs/hooks/use-transition

const [items, set] = useState([...])
const transitions = useTransition(items, item => item.key, {
from: { transform: 'translate3d(0,-40px,0)' },
enter: { transform: 'translate3d(0,0px,0)' },
leave: { transform: 'translate3d(0,-40px,0)' },
})
return transitions.map(({ item, props, key }) =>
<animated.div key={key} style={props}>{item.text}</animated.div>
)

Answer 2

我在回答自己的问题，所以它不起作用的原因是我使用了不同的值。

从0到300px。它必须是相同的值，因此更改为 transform: state.isOpen ? 'translate3d(0, 0, -300px)' : 'translate3d(0, 0, **0px)**' 其中0px有所不同：）

感谢您的帮助！

使用react-spring有条件地对React组件进行动画处理

2 个答案: