Question

我很新来做出反应。我目前正在按照本教程进行操作，但是努力在本地运行它。

教程-> https://github.com/alexdevero/React-Flipping-Card-Tutorial

我已经在index.html文件中添加了适当的bootstrap头，并且已经集成了React css-loader。我可以在本地运行react应用，但似乎无法实现翻转功能...

这就是最终应用程序的外观：

这是我的index.html文件

<!DOCTYPE html>
<html>

<head>
    <title>The Minimal React Webpack Babel Setup</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <!-- <div id="app"></div> -->
    <div class="react-card"></div>
    <!-- jQuery library -->
    <script src="/bundle.js"></script>
    </head>
</body>

</html>

请给我有关如何实现翻转功能的指南。

谢谢

Answer 1

由于阅读本教程将需要很长时间，因此我将仅说明如何翻转卡片。

首先在状态中创建一个state属性。（我正在使用Component类）

this.state = { isFlipping: false };

然后创建一个函数来设置翻转的属性：我在6秒钟后将状态设置为true。

animateCard() {
    this.cardAnimationInterval = setInterval(() => {
      this.setState(() => ({
        isFlipping: !this.state.isFlipping
      }));
    }, 6000);
  }

在加载组件时，调用此函数：

componentDidMount() {
    this.animateCard();
  }

当我们导航到另一个页面时，我们应该停止翻转。

componentWillUnmount() {
//we make sure that cardAnimationInterval is defined otherwise clearInterval(this.cardAnimationInterval) would cause an error.
    this.cardAnimationInterval && clearInterval(this.cardAnimationInterval);
  }

这是翻转的功能。现在我们需要设置CSS。假设我们的卡片在div元素内

在render（）{}内部编写：

const { isFlipping } = this.state;

 //if isFlipping true add "isFlipping" class otherwise nothing
 <div className={`flipper ${isFlipping ? "isFlipping" : ""}`}>
      <div className="front">{Place your card code here}</div>
 </div>

CSS

.flipper {
  //CSS transitions allows you to change property values smoothly, over a given duration.
  transition: 3s;
  //The transform-style property specifies how nested elements are rendered in 3D space.
  // This property must be used together with the transform property.
  transform-style: preserve-3d;
  position: relative;
}

//initial state of .front class
.front {
  transform: rotateY(0deg);
}

//if isFlipping is true, change the initial value
.flipper.isFlipping {
  transform: rotateY(-360deg);
}

React Project Flipping Card，无法实现翻转功能

1 个答案: