Material-ui卡片翻转动画

Question

React Material-ui 的Card 组件文档声明它不要翻转以在背面显示更多信息。我不明白为什么......但是有没有人想出一种方法让他们使用其他一些库翻转？

Answer 1

我会使用 CSS 过渡组库，如下所示。

1. 在您的 CLI 中：npm install react-transition-group@1.x --save

2. 在您的 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>

1. 终于有了你的 CSS 样式：

.cardAnimation-appear {
      opacity: 0.01;
      transform: rotate(20deg);
    }

    .cardAnimation-appear.cardAnimation-appear-active {
      opacity: 1;
      transition: all 1s ease-in;
    }