组件仅在重新加载页面时显示动画,而在状态更改时不显示动画

时间:2019-09-30 08:59:31

标签: reactjs

我正在尝试一次在页面上显示三张卡片,并且已将过渡应用于这些卡片。当我单击按钮时,它会更新状态并显示另外三张卡。但是这些卡片不会设置动画。动画仅在重新加载页面时可用,而在状态更改时不起作用。

https://codesandbox.io/s/confident-shaw-pvku3

2 个答案:

答案 0 :(得分:0)

您必须将状态绑定到Grow的'in'属性

增长= {this.state.updatedValue}

希望这能解决您的问题

要了解更多信息,请查看文档以获取实质性用户界面 https://material-ui.com/components/transitions/

答案 1 :(得分:0)

您忘了在地图功能内的每个<Grow />中添加密钥。

如果不将密钥添加到<Grow />

React无法区分所呈现的每个组件。 如果没有关键组件,React会认为它们是相同的组件,新的<Grow />将不会重新设置动画。

我在下面附加了codesandbox网址作为示例。

https://codesandbox.io/embed/dry-hooks-z75oc

相关问题