[英]Slide API Mui in React is triggering listener at start not end
I want to have an object slide to the left side of the screen from the right.我想让 object 从右边滑到屏幕的左边。 This is my code:
这是我的代码:
import rock1 from "src/demos/MyDemo/assets/rock1.png"
import Slide from '@mui/material/Slide';
const Test = () => {
return (
<>
<Slide
direction="left"
in={true}
mountOnEnter unmountOnExit
timeout={4000}
easing={{
enter: "linear",
exit: "linear"
}}
addEndListener={()=>alert("Done")}
>
<img
height={100}
className="Rock" src={rock1}
style={{position:"absolute", left: -100, marginBottom:20}}
/>
</Slide>
</>
);
}
export default Test;
I want to do some stuff when the transition ends, so I've added a placeholder end listener for now.我想在过渡结束时做一些事情,所以我现在添加了一个占位符结束侦听器。 However, the listener triggers when the transition starts and does not trigger again when it ends.
但是,侦听器会在转换开始时触发,而不会在转换结束时再次触发。 Why is it happening at the beginning, not the end, and how can I get it to register correctly?
为什么它发生在开始而不是结束,我怎样才能让它正确注册?
According to the react-transition-group doc that is referenced by MUI on the Slide
API page , addEndListener
can be used to add another listener for the transition end and pass a callback.根据 MUI 在
Slide
API页面上引用的 react-transition-group 文档, addEndListener
可用于为过渡结束添加另一个侦听器并传递回调。
Live demo for below examples on stackblitz . stackblitz上以下示例的现场演示。
Perhaps try below example for addEndListener
:也许尝试下面的
addEndListener
示例:
addEndListener={(node, done) =>
// 👇 node is the element being transitioned
node.addEventListener(
// 👇 This event fires at the finish of transition
"transitionend",
(e) => {
// 👇 Do something here
console.log("Actually done");
done(e);
},
false
)
}
However, according to the above sources, it seems that another way to achieve the same result here is by adding a callback to the prop onEntered
:然而,根据上述消息来源,似乎在这里实现相同结果的另一种方法是向 prop
onEntered
添加回调:
onEntered={() => console.log('onEntered fired')}
Despite the name, onEntered
is fired when the transition is complete here, while another prop onExited
runs when the exit transition concludes, if applicable.尽管名称如此,当转换完成时
onEntered
会在此处触发,而另一个道具onExited
在退出转换结束时运行(如果适用)。 More details can be found in above source links.可以在上面的源链接中找到更多详细信息。
Hope this will help.希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.