反应 Spring 和 useTransition答案

【问题标题】：React Spring and useTransition反应 Spring 和 useTransition
【发布时间】：2020-08-08 19:48:43
【问题描述】：

我正在尝试使用 react-spring，我有一个非常简单的组件动画，应该在切换时安装/卸载。

const state = useContext(MyContext)
  const transitions = useTransition(state.nav, null, {
    from: { tranform: 'translate3d(-100%, 0, 0)' },
    enter: { transform: 'translate3d(0, 0, 0)' },
    leave: { tranform: 'translate3d(-100%, 0, 0)' },
  })
  return transitions.map((item, key, props) => (
    <animated.div style={props} key={key}>
      <Navigation items={items} />
    </animated.div>
  ))

但是，当我在浏览器中运行它时，我得到了这个错误：

Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

除了使用 Context 之外，当我查看其他教程时，我看不出任何问题。感谢任何帮助！

【问题讨论】：

这能回答你的问题吗？ React Spring - Animate element between renders

标签： reactjs animation react-spring

【解决方案1】：

您似乎在transitions.map 缺少一个销毁运算符。

return transitions.map((item, key, props) => (

应该是

return transitions.map(({ item, key, props }) => (

请参阅https://www.react-spring.io/docs/hooks/use-transition 的文档。

另外，请记住，函数上的项目是 state.nav 的值。

【讨论】：