React:动画-react-transition-group、

react-transition-group文档：https://reactcommunity.org/react-transition-group/switch-transition

animate.css文档：https://animate.style/

ant.design文档：https://motion.ant.design/exhibition-cn/

ant.design

1.rc-tween-one：支持缩放、位移、旋转等动画

https://motion.ant.design/language/animate-term

import TweenOne from 'rc-tween-one';
<TweenOne style={{backgroundColor:'red'}} animation={{ width:200 }}>

2.Parallax 随页面滚动播放动画

import {Parallax} from 'rc-scroll-anim';

  <Parallax
    // always={false}
    animation={{ y:0,opacity:1, playScale: [0.2, 0.5] }}
    style={{transform: 'translateY(100px)',opacity:0 }}
    >
    <div className='rowView'>
      <div className='rowItem' style={{backgroundColor:RandomColor()}}>12</div>
      <div  className='rowItem' style={{backgroundColor:RandomColor()}}>14</div>
      <div  className='rowItem' style={{backgroundColor:RandomColor()}}>15</div>
    </div>
  </Parallax>

3.进出场动画

import QueueAnim from 'rc-queue-anim';
<QueueAnim type={['bottom','left']} animConfig={{ opacity:[1, 0] }}>
  <div key="demo1">依次进场</div>
  <div key="demo2">依次进场</div>
  <div key="demo3">依次进场</div>
  <div key="demo4">依次进场</div>
</QueueAnim>

animate.css使用简单，指定className即可

react-transition-group主要通过描述各种状态的css实现动画效果

 <CSSTransition
        in={showMessage}
        timeout={300}
        classNames="alert"/>
.alert-appear:{},
.alert-appearActive:{},
.alert-appearDone: {},
.alert-enter: {},
.alert-enterActive:{},
.alert-enterDone:{},
.alert-exit: {},
.alert-exitActive:{},
.alert-exitDone:{},

import { CSSTransition } from 'react-transition-group';

import './Transition.css';
function App() {
  const [showButton, setShowButton] = useState(true);
  const [showMessage, setShowMessage] = useState(false);
 
  return (
    <Main>
     {showButton && (
        <button
          onClick={() => setShowMessage(true)}
        >
          Show Message
        </button>
      )}
      <CSSTransition
        in={showMessage}
        timeout={300}
        classNames="alert"  通过css控制动画，有多种状态对应多个css
        unmountOnExit
        onEnter={() => setShowButton(false)}
        onExited={() => setShowButton(true)}
      >
        <div style={{backgroundColor:'red'}}>
          <div>
            Animated alert message
          </div>
          <button onClick={() => setShowMessage(false)}>
            Close
          </button>
        </div>
      </CSSTransition>
    </Main>
    )
}

.alert-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.alert-enter-active {
  opacity: 1;
  transform: translateX(0%);
  transition: opacity 300ms, transform 300ms;
}
.alert-exit {
  opacity: 1;
  transform: translateX(0%);
}
.alert-exit-active {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 300ms, transform 300ms;
}