React——动画库

react动画库：react-transition-group
所有的前端库都可以去npmjs.com查看文档

一、安装

npm install react-transition-group --save

阅读官方文档
https://reactcommunity.org/react-transition-group/

二、Transition组件

Transition组件使用

import { Transition } from 'react-transition-group';
import React, { useRef } from 'react';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

export default function Fade({ in: inProp }) {
  const nodeRef = useRef(null);
  return (
    <Transition nodeRef={nodeRef} in={inProp} timeout={duration}>
      {state => {
        console.log(state)
        return (
          <div ref={nodeRef} style={{
            ...defaultStyle,
            ...transitionStyles[state]
          }}>
            I'm a fade Transition!
          </div>
        )
      }}
    </Transition>
  );
}

测试

import React from 'react';
import TransitionTest from './components/TransitionTest'
import { useState } from 'react';

export default function App() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <TransitionTest appear in={show} />
      <button onClick={() => setShow(!show)}>显示隐藏切换</button>
    </div>
  )
}

三、CssTransition组件

CssTransition组件使用

import React from 'react';
import { useState, useRef } from 'react';
import { CSSTransition } from 'react-transition-group'
import "./components/TransitionTest/cssTransition.css"

export default function App() {
  const [show, setShow] = useState(true)
  const nodeRef = useRef(null);

  return (
    <div>
      <CSSTransition nodeRef={nodeRef}
        appear
        in={show}
        classNames={{
          appear: 'my-appear',
          appearActive: 'my-active-appear',
          appearDone: 'my-done-appear',
          enter: 'my-enter',
          enterActive: 'my-active-enter',
          enterDone: 'my-done-enter',
          exit: 'my-exit',
          exitActive: 'my-active-exit',
          exitDone: 'my-done-exit',
        }}
        timeout={800} >
        <h1 ref={nodeRef}>自定义的CssTransition</h1>
      </CSSTransition>
      <button onClick={() => setShow(!show)}>显示隐藏切换</button>
    </div>
  )
}

css样式

.my-appear, .my-enter {
  opacity: 0;
  transition: opacity 800ms;
}

.my-exit {
  opacity: 1;
  transition: opacity 800ms;
}

.my-active-exit, .my-done-exit {
  opacity: 0;
} 

.my-active-appear, .my-active-enter  {
  opacity: 1;
}

.my-done-appear, .my-done-enter {
  opacity: 1;
}