react动画animate.css用css实现了各种常见的动画效果和react结合 react-animated-cs

`animate.css` 用css 实现了各种常见的动画效果和react结合 `react-animated-css`

基本用法

`animate.css` 基本用法 class="animated zoomOutDown" 添加两个class既可以初始化一个动画

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>import {Animated} from "react-animated-css";
<Animated animationIn="bounceInLeft" animationOut="fadeOut" isVisible={true}>
    <div>
        hello world ;)
    </div>
</Animated>

通过isVisible 来控制是添加 in的类，还是out的类

`eact-transition-group` 的用法，此为react官方组件

import { Transition } from 'react-transition-group';const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

过渡状态通过in道具切换，各个状态可以监听回调

mport { CSSTransition } from 'react-transition-group';function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}过渡组import {CSSTransition,TransitionGroup,} from 'react-transition-group';

总结：以上动画组件的原理是类似的，都是在通过控制一个属性 in 或者是 isVisible，为true时，添加一些classs，

为false时，重新添加一些class，这些class可以有自己定义

其实动画没你想的那么简单