[英]simple react-pose opacity transition dont work
i'm new with react-pose
and i try a simple thing but the transition dont work. 我是
react-pose
新手,我尝试了一个简单的事情,但过渡不起作用。
I only want to have a transition between 2 states. 我只希望在两个州之间进行过渡。
Like opacity 0 => 1
像
opacity 0 => 1
I want to use it with a const so i use the new react hook. 我想使用它与const,所以我使用新的反应钩。
import React, { useState } from 'react';
import posed from 'react-pose';
const Pop = () => {
const [position, setPosition] = useState(false);
const Box = posed.div({
left: { x: 0 },
right: { x: 100 }
});
const toggleVisibility = () => {
setPosition(!position);
};
return (
<div>
<Box pose={position ? 'left' : 'right'} className="box" />
<button onClick={toggleVisibility}>Toggle visibility</button>
</div>
);
};
export default Pop;
Everything is working but this code act like i have set transition: 0s
一切正常,但这段代码就像我设置
transition: 0s
Can you help me ? 你能帮助我吗 ?
Here the solution You need to put the const Box outside the react class, for prevent rerender. 这里的解决方案您需要将const Box放在react类之外,以防止重新出现。
import React, { useState } from 'react';
import posed from 'react-pose';
const Box = posed.div({
left: { x: 0 },
right: { x: 100 }
});
const Pop = () => {
const [position, setPosition] = useState(false);
const toggleVisibility = () => {
setPosition(!position);
};
return (
<div>
<Box pose={position ? 'left' : 'right'} className="box" />
<button onClick={toggleVisibility}>Toggle visibility</button>
</div>
);
};
export default Pop;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.