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