转换为React代码后，CSS转换将停止工作：

Question

我在这里翻译了这段代码：

https://codepen.io/desandro/pen/LmWoWe

id

在这里变成了一个React等效项，但是它不再起作用。

http://jsfiddle.net/95qeyhm0/

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

我验证了状态是否在true和false之间切换，但使用Chrome检查器验证了是否同时切换了className。

但是输出保持不变（在React版本中不会翻转）

Answer 1

在渲染功能中，card和is-flipped是互斥的，但是翻转的样式范围为.card.is-flipped。

将您的卡className的逻辑更新为：

<div className={`card ${!this.state.front && "is-flipped"}`}>

Updated Fiddle