Intro

接下来几天会逐个介绍 Components 之间可以共享的一些 Interfaces 和 能作为基底的 Base Components。

Interface 和 Base Component 虽然都可以作为元件的底层，但两者的差别在於 Interface 通常不会被拿来使用，甚至是不该被拿来使用，它的功能仅是把共用的功能封装在一起，方便统一管理跟修正，像是今天会讲到的 Transition 就会被包装成 Fade、Collapse、Zoom ，一般不会直接去使用 Transition。

而 Base Component 则是可以单独使用，只是也作为许多较复杂元件的零件而已，像是 Button，它可以被用在组装 Upload、Pagination 等等元件。

如果听完还是很模糊的话没关系，在这几天会一一介绍这些 Interfaces 和 Components，看完这些案例後再回来看应该就能更理解了，还是不懂的话也欢迎留言告诉我！

第一个要介绍的 Interfaces 就用之前在 Motion 中已经提到过的 Transition 来开场，让大家能比较快进入状况。

Transition UML

就是如此轻松写意，在 Transition 这还真没什麽复杂的。

而 Transition Interface 所封装好的共用功能在 Day 11 已经 Demo 过了，这边重申过 Transition 是把「过渡」这个行为的抽象化出来的一个介面，让 Fade 这些不同的过渡方式可以传入 Transition 所需要的一些属性和方法就把 Component 实作出来。

而以 Day 11 的东西来说，Transition 这个介面 就是 React Transition Group 帮我们做好的事，我们在後续去实作 Fade 或 Zoom 都只要再去给 ClassName 定义相应的 Transition 方式就可以了。

className 是自定义的，可以遵照不同的过渡类型来命名，像是范例中是 Fade 的过渡样式，就可以直接取 .fade。

而 enter、enter-active、exit 和 exit-active 就是我们要客制化不同过渡类型的 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;
}

使用起来就像这样，其实只要定义好 className 并传下去，有个这样的介面的威力是不是很强大呢！

<CSSTransition
  classNames="fade"
  >
  {children}
</CSSTransition>

小结

第一个介面就这样介绍完了，虽然有点水，但拿实作过的 Transition 跟 Fade 来开头是希望能让读者感受到这个先後关系，在元件实作时，如果看到一个网站中有大量的过渡时，就该知道要先实作一个 Transition 元件（或直接用套件）来当基底，後续的各种过渡都能遵从 Transition 定义出来的介面来提供值、传 Props 等等，而不是看到 Fade 实作 Fade，看到 Collpase 实作 Collpase，又会这边用 Style 来写、那边用 CSS 来写，整个介面跟规格没有统一的情况下，会导致没有效率的重工，甚至可能为之後重构和协作上增添许多不要的成本。

明天要接着介绍的是 Portal Interface，Portal 这个介面在 UML 元件图架构中可以说是最完整的，相信能带大家能更理解 UML 、介面跟元件依赖关系。

那就明天见罗！