今天要介绍的是网页元件会用到的动画，在 Day 07 已经介绍过过渡动画这边主要就是三大重点要定义：过渡类型（ Transition Type）、持续时间（Duration）和 缓速效果（Easing）。

想先看 Code 或是 Demo 的由此去

Github Repo： ithelp-ui-demo

Live Demo：Storybook

React Transition Group

在实作上，有个现成的好用东西叫 React Transition Group 可以用，而在 Vue 那边则是直接有 Transition Mode 可以用。

它主要提供 Transition、CSSTransition、SwitchTransition 和 TransitionGroup 这四大元件给我们用。

Transition：最基本的 Transition 元件，用 style Attribute 操作 CSS。

CSSTransition：以 Transition 元件为基础，进一步让你可针对 CSS 做客制化。

SwitchTransition：可让你运用 State 去切换想呈现的 Transition 效果。

TransitionGroup：让你一次管理一整组元件的 Transition 特效。

在这边会采用的是第二种 CSSTransition 元件，因为可以客制化 CSS，并运用 Tailwind Utility Class 的可以让原生 CSS 去 Apply 的特性，可以更好地去定义 Transition 的效果，再加上使用 className 的效能会比 Style 好很多，所以选择使用 CSSTransition。

但 Transition 的自由度一定是比较高的，这边我可能日後会在修正，到时候也会补上新版的 Code，但今天先这样 Demo！

元件的过场（Transition）都是由一个 Trigger 触发（可能是点击按钮），并会定义起始状态跟结束状态（点击前後的元件的状态，像是 按钮点击後相应的元件会出现跟消失），依此可以再区分出以下四个时机点：

• 'entering' ：正要进入起始状态的时间点（按钮点击後，元件准备出现的瞬间），像是 Modal 正准备出现。
• 'entered'：起始状态过渡完成的时间点（元件出现的过渡动画结束时的瞬间），像是 Modal 出现後的那个时间点。
• 'exiting'：与 entering 相反，正要进入结束状态的时间点（按钮再次点击後，元件准备消失的瞬间），像是 Modal 正准备消失。
• 'exited'：与 enter 相反，结束状态过渡完成的时间点（元件结束的过渡动画结束的瞬间），像是 Modal 消失後的那个时间点。

以下图来说，元件要出现时，先是 entering 状态什麽都没有， Opacity 是 0，到 entered 元件出现後，opacity 变 1，并附上相应的 transition 属性。

而元件要消失时，先进入 exiting 状态，元件还存在所以opacity 是 1，到 exited 元件消失後， opacity 是 0，并也有相应的 transition 属性。

而 CSSTransition 需要引入的 CSS 设定会是这样：

.className-enter {
  opacity: 0;
}
.className-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.className-exit {
  opacity: 1;
}
.className-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

Interface

接下来就介绍在 React Transition Group 为 Transition 设计了怎样的介面，提供了哪些 Props，除了下图以外还有一些 Props （像 appear, addEnd Listener 等等），但这边没用到就先不赘述。

元件实作

元件的实作就这样直接使用套件，但只有这样的话就太没诚意了，因此在这边会实作 Fade 来 Demo 给大家看！

Fade

import { CSSTransition } from "react-transition-group";
import { CSSTransitionProps } from "react-transition-group/CSSTransition";

import './fade.css';

export interface FadeProps extends CSSTransitionProps {
}

export const Fade: React.FC<CSSTransitionProps> = (props) => {
  const {
    children,
    ...rest
  } = props;

  return (
    <CSSTransition
      timeout={300}
      unmountOnExit
      classNames="fade"
      {...rest}
    >
    {children}
  </CSSTransition>
  )
}

.fade-enter {
  opacity: 0;
  transform: scale(0.9);
}
.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

这边其实还是把 TransitionType、Duration 跟 Easing 写死，但如之前所说，这部份应该是要在 Design System 中会定义出几个固定的值，让整个网页的过渡效果都一致，但这次 Demo 做得比较赶没时间去做更弹性的处理，等这系列的文章都发完後还有空的话，会再上来重构一下的！

小结

今天的东西可能有点水，但重点在介绍 React-Transition-Group 这个好东西给大家，跟 Design System 更有关联的许多客制化希望能再日後会再补上更好的版本，这边就先请读者见谅了！

那 Design System 的篇章就到今天结束了，对於设计还想知道的话可以参考 Material Design ，而实作的部分真的是透过 Tailwind 就能实现大部分了，这边是透过 Color 给大家感受一下，Typography 是比较特别也有趣的实作，而 Icon 跟 Transition 则是提供给大家一种作法，其实还有很多种其他的实作方式的！

明天开始会进入 元件们的 UML 环节，谈谈 UI 元件们彼此之间的关系，理解网页中 UI 元件的阶层关系，像是哪些元件是最先需要实作的 、哪些元件是怎麽被组成的等等，而这些关系在软件设计中是可以透过 UML 的元件图来呈现的。

那就明天见罗！