使用 react-spring 有条件地为 React 组件设置动画答案

【问题标题】：Animate conditionally React component with react-spring使用 react-spring 有条件地为 React 组件设置动画
【发布时间】：2019-12-23 00:24:42
【问题描述】：

我有一个 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 转换做错了吗？

【问题讨论】：

标签： reactjs animation react-spring

【解决方案1】：

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

从0 到300px。它必须是相同的值，因此更改为 transform: state.isOpen ? 'translate3d(0, 0, -300px)' : 'translate3d(0, 0, **0px)**' 0px 的区别在哪里 :)

感谢您的帮助！

【讨论】：

【解决方案2】：

您已阅读此页面。
我搜索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>
)

【讨论】：