React 中动画的问题

[dufu1991]

我是 React 菜鸟，帮我看一下这个代码：

// ...
const [show,setShow]=useState(false)

const showFn=()=>{
	setShow(!show)
}

//...
<div style={{left:show?'0px':'100px'}}></div>
//...

这段代码中，根据 show 的值修改这个定位元素的 left ，并且切换的时候这个元素是有过渡效果的，但是因为状态改变导致整个组件重新渲染，那么这个过渡效果就失效了。 要如何解决？

[anyilin]

虽然通过这几行看不出来你所谓的过渡效果是怎么实现的，但只论过渡效果，除非要实现复杂的动画，否则和 React ，或者说和 js 没什么关系。给这个 div 一个 class ，内容类似.transition-left { transition: left 0.3s ease }，应该就可以了。

[dufu1991]

就是使用 transition: left 0.3s ease ，但是每次修改 show 的值的时候，整个组件重新渲染了，导致动画的初始状态变回去了，就没有动画效果了。

[Yukiniro]

组件渲染不会导致动画失效，除非是节点结构产生了变化。如果有这个问题应该是你其他代码导致的。这里有一个示例可以看下： https://stackblitz.com/edit/vitejs-vite-fhycqw?file=src%2FApp.jsx

[dufu1991]

破案了，是使用 Context 是，如果将组件包裹在 Provider 内就会出现这种问题，也有可能是 Context 使用的不对，我再研究下。

[wktrf]

@dufu1991 #4 React Context 仅用来共享对象实例（例如 eventbus 实例）就够了，不要在 Context Provider 中触发任何状态变化