React Material-ui 的 Card
组件文档声明它不要翻转以在背面显示更多信息。我不明白为什么......但是有没有人想出一种方法让他们使用其他一些库进行翻转?
最佳答案
我会使用 CSS Transition Group 库,如下所示。
在您的 CLI 中:npm install react-transition-group@1.x --save
在您的 React 组件中,在顶部导入您的新库:
import { CSSTransitionGroup } from 'react-transition-group'
然后在你的返回中添加:
<CSSTransitionGroup
transitionName="cardAnimation"
transitionAppear={true}
transitionAppearTimeout={1000}
transitionEnter={false}
transitionLeave={false}
>
{
// Your html content - probably your Card
}
</CSSTransitionGroup>
- 终于有了您的 CSS 样式:
.cardAnimation-appear {
opacity: 0.01;
transform: rotate(20deg);
}
.cardAnimation-appear.cardAnimation-appear-active {
opacity: 1;
transition: all 1s ease-in;
}
关于reactjs - Material-ui卡片翻转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44077680/