How to implement simple react js animation with react-pose without node js?

Question

I am newbie in react js. Recently I went through the react js documentation and react-pos documentation . 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>

Answer 1

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..

Answer 2

If you use babel-standalone for experimentation, you need to make sure you set the type attribute of your script to 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>

How to implement simple react js animation with react-pose without node js?

Question

2 answers

solution1
0 2019-03-14 12:46:25

solution2
0 2019-03-14 12:47:25

How to implement simple react js animation with react-pose without node js?

Question

2 answers

solution1 0 2019-03-14 12:46:25

solution2 0 2019-03-14 12:47:25

solution1
0 2019-03-14 12:46:25

solution2
0 2019-03-14 12:47:25