如何在没有节点js的情况下使用react-pose实现简单的react js动画？
如何在没有节点js的情况下使用react-pose实现简单的react js动画？
提问于 2019-03-14 20:31:12
我是react js的新手。最近我浏览了react js documentation和react-pos documentation。我实现了以下代码片段。但当我运行它时，它在浏览器中没有任何效果。我哪里错了？
<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>回答 2
Stack Overflow用户
发布于 2019-03-14 20:46:25
也许是这样的：
<Box className="box" style={{visible: this.state.isVisible, hidden: !this.state.isVisible}} />;无论哪种方式，您都需要使用this.state.isVisible，，而不仅仅是isVisible。
Stack Overflow用户
发布于 2019-03-14 20:47:25
如果使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55162611
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号