如何转换列内的内容

Question

人。目前我正在构建React Weather应用程序（http://powerful-headland-90755.herokuapp.com/#/weather）

我想让底部的那些列翻转以显示背面的内容。我遇到了一个问题，这个动画要求子元素绝对定位，这就是列本身变得非常低的原因。我有语义ui网格，并希望在悬停时翻转这些方块。

有关如何在变换网格时不打破网格的任何建议吗？很高兴收到任何帮助或想法！

Answer 1

一种技术是制作一个占用空间的div，然后渲染绝对定位的实际卡片。然后，您可以在不更改网格项的情况下为其设置动画。

<div style={{width: '10em', height: '25em'}}>
  <div style={{
    position: 'absolute', top: 0, right: 0, left: 0, bottom: 0,
    transform: something,
  }}>
    content here
  </div>
</div>

_{用于示例目的的内联样式。}