Material-ui卡片翻转动画

Posted 2023-02-22

【中文标题】Material-ui卡片翻转动画

【英文标题】：Material-ui Card Flip Animation

【发布时间】：2017-10-20 00:49:36

【问题描述】：

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

【参考方案1】：

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

在您的 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;