Day20-React 简易动画篇-上篇

这篇要来介绍一下一些能用 React 实现一些动画效果的函式库，首先介绍的就是本篇的主角 React Transition Group，

React Transition Group 目前有四种元件，分别是:

Transition
CSSTransition
SwitchTransition
TransitionGroup

接着我们来一一介绍它们吧!

Transition 元件

使用这个元件可以透过一些 api 去订阅元件的状态，常用在 mount 和 unmount 过渡动画的元件。

此元件有四种状态:

entering
entered
exiting
exited

至於改变 Transition 元件的状态是透过 in 这个 props 属性。

in 为 true 时，会从 entering 改变到 entered
in 为 false 时，会从 exiting 改变到 exited

当然除了 in 这个 props 属性外还有其他的属性，可以参考官方文件，这里就不一一介绍。

Transition 元件范例

import React, { useState } from "react";
import { Transition } from "react-transition-group";

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
  padding: 20,
  display: "inline-block",
  backgroundColor: "#8787d8"
};

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

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

export default function App() {
  const [show, setShow] = useState(false);

  const handleToggle = () => setShow(!show);

  return (
    <>
      <button onClick={() => handleToggle()}>Click to toggle</button>
      <Fade in={!!show} />
    </>
  );
}

范例程序码

CSSTransition 元件

这个元件除了具有 Transition 元件的功能外，可以根据状态(appear、enter、exit)去切换不同的 className，进而改变样式。

appear 状态: 为 false 时当 CSSTransition 元件加载完毕後不执行动画，为 true 时元件加载完毕则立即执行动画。
如果要元件初次渲染就有动画，则需要设成 true。

常见的 className 设定有以下几种，记得 CSSTransition 元件要设定对应的 className 开头(以下范例就是 classNames="example") :

/* in 为 true 时: */
.example-enter {
/*   opacity: 0; */
}
.example-enter-active {
/*   opacity: 1; */
/*   transition: opacity 200ms; */
}

/* in 为 false 时: */
.example-exit {
/*   opacity: 1; */
}
.example-exit-active {
/*   opacity: 0; */
/*   transition: opacity 200ms; */
}

<CSSTransition
  in={showMessage}
  timeout={300}
  classNames="example"
  unmountOnExit
  onEnter={() => setShowButton(false)}
  onExited={() => setShowButton(true)}
>
  <!-- ... -->
</CSSTransition>

CSSTransition 元件范例:

// App.js
import React, { useState, useEffect } from "react";
import { CSSTransition } from "react-transition-group";

import "./styles.css";

const Fade = ({ children, ...props }) => (
  <CSSTransition {...props} timeout={1000} classNames="fade">
    {children}
  </CSSTransition>
);

export default function App() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    let id = setInterval(() => {
      setShow(!show);
    }, 5000);

    return () => clearInterval(id);
  }, [show]);

  return (
    <Fade in={show}>
      <div className="greeting">Hello world</div>
    </Fade>
  );
}

/* styles.css */
.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0.01;
  transition: opacity 800ms ease-in;
}

.greeting {
  padding: 20px;
  background-color: #ccc;
  width: 200px;
  margin: auto;
  text-align: center;
  border-radius: 4px;
}

范例程序码

这篇先到这边结束，下篇将会介绍剩下的两个元件，以下补充一些相关连结。