如何转换列内的内容

Question

伙计们。目前我正在开发uilding React Weather 应用程序(http://powerful-headland-90755.herokuapp.com/#/weather)

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

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

Answer 1

一种技术是制作一个 div 占据 space，并渲染其中绝对定位的实际卡片。然后您可以在不改变网格项目大小的情况下对其进行动画处理。

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

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