[英]How to implement simple react js animation with react-pose without node js?
I am newbie in react js. 我是React JS的新手。 Recently I went through the react js documentation and react-pos documentation .
最近,我浏览了react js 文档和react-pos 文档 。 I have implemented the following snippet.
我已经实现了以下代码段。 But when I run it, it has no effect in the browser.
但是,当我运行它时,它在浏览器中没有任何作用。 Where am I wrong?
我哪里错了?
<html>
<head>
<style>
.box{
background:red;
}
</style>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
</script>
<script src="https://unpkg.com/react-pose/dist/react-pose.js"></script>
<div style="width:200px; height:200px; background:#eaeaea;" id="root"></div>
<script>
const Box = posed.div({
hidden: { opacity: 0 },
visible: { opacity: 1 }
});
class Example extends React.Component {
state = { isVisible: true };
componentDidMount() {
setInterval(() => {
this.setState({ isVisible: !this.state.isVisible });
}, 1000);
}
render() {
const { isVisible } = this.state;
return <Box className="box" pose={isVisible ? 'visible' : 'hidden'}
/>;
}
}
ReactDOM.render(<Example/>, document.getElementById('root'));
</script>
</body>
</html>
Perhaps this: 也许这:
<Box className="box" style={{visible: this.state.isVisible, hidden: !this.state.isVisible}} />;
Either way, you need to use this.state.isVisible , not just isVisible.. 无论哪种方式,您都需要使用this.state.isVisible ,而不仅仅是isVisible。
If you use babel-standalone
for experimentation, you need to make sure you set the type
attribute of your script to text/babel
. 如果您使用
babel-standalone
进行实验,则需要确保将脚本的type
属性设置为text/babel
。
.box { width: 200px; height: 200px; background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/react-pose@3.1.0/dist/react-pose.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script> <div id="root"></div> <script type="text/babel"> const Box = posed.div({ hidden: { opacity: 0 }, visible: { opacity: 1 } }); class Example extends React.Component { state = { isVisible: true }; componentDidMount() { setInterval(() => { this.setState({ isVisible: !this.state.isVisible }); }, 1000); } render() { const { isVisible } = this.state; return <Box className="box" pose={isVisible ? "visible" : "hidden"} />; } } ReactDOM.render(<Example />, document.getElementById("root")); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.