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