如何在没有节点js的情况下使用react-pose实现简单的react js动画？答案

【问题标题】：How to implement simple react js animation with react-pose without node js?如何在没有节点js的情况下使用react-pose实现简单的react js动画？
【发布时间】：2019-03-14 12:31:11
【问题描述】：

我是 react js 的新手。最近我浏览了 react js documentation 和 react-pos documentation。我已经实现了以下 sn-p。但是当我运行它时，它在浏览器中没有任何影响。我哪里错了？

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

【问题讨论】：

标签： javascript reactjs react-pose

【解决方案1】：

也许是这样的：

<Box className="box" style={{visible: this.state.isVisible, hidden: !this.state.isVisible}} />;

无论哪种方式，您都需要使用 this.state.isVisible，而不仅仅是 isVisible..

【讨论】：

OP 正在解构上一行的isVisible，因此只需isVisible 即可。 const { isVisible } = this.state;
@Tholle - 是的，没注意到！

【解决方案2】：

如果您使用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>

【讨论】：