这是一个创建于 70 天前的主题，其中的信息可能已经有所发展或是发生改变。
我是 React 菜鸟，帮我看一下这个代码：
// ...
const [show,setShow]=useState(false)
const showFn=()=>{
setShow(!show)
}
//...
<div style={{left:show?'0px':'100px'}}></div>
//...
这段代码中，根据 show 的值修改这个定位元素的 left ，并且切换的时候这个元素是有过渡效果的，但是因为状态改变导致整个组件重新渲染，那么这个过渡效果就失效了。 要如何解决？
5 条回复
 |
1
anyilin 70 天前  1
虽然通过这几行看不出来你所谓的过渡效果是怎么实现的，但只论过渡效果，除非要实现复杂的动画，否则和 React ，或者说和 js 没什么关系。给这个 div 一个 class ，内容类似.transition-left { transition: left 0.3s ease }，应该就可以了。
|
 |
2
dufu1991 OP 就是使用 transition: left 0.3s ease ，但是每次修改 show 的值的时候，整个组件重新渲染了，导致动画的初始状态变回去了，就没有动画效果了。
|
 |
3
Yukiniro 70 天前 1
组件渲染不会导致动画失效，除非是节点结构产生了变化。如果有这个问题应该是你其他代码导致的。这里有一个示例可以看下： https://stackblitz.com/edit/vitejs-vite-fhycqw?file=src%2FApp.jsx
|
|
4
dufu1991 OP 破案了，是使用 Context 是，如果将组件包裹在 Provider 内就会出现这种问题，也有可能是 Context 使用的不对，我再研究下。
|
Select Language