您正在使用三元组,因此该组件已卸载。
如果greetingStatus
为真,则不渲染。也总是渲染你的动画 div(因为你用 1 或 0 切换不透明度)
您的代码的工作副本在沙箱中
代码片段
import React from "react";
import ReactDOM from "react-dom";
import { useSpring, animated as a } from "react-spring";
import "./styles.css";
const App = () => {
const [greetingStatus, displayGreeting] = React.useState(false);
const contentProps = useSpring({
opacity: greetingStatus ? 1 : 0,
marginTop: greetingStatus ? 0 : -500,
position: "absolute"
});
return (
<div className="container">
<div className="button-container">
<button onClick={() => displayGreeting(a => !a)} className="button">
Click Here
</button>
</div>
{!greetingStatus ? <div className="Intro">Click button below</div> : null}
<a.div className="box" style={contentProps}>
<h1>Hey there ! React Spring is awesome.</h1>
</a.div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);