[JavaScript30 笔记] 05 - Flex Panel Gallery

写在系列开篇

在学习了基本的 HTML / CSS / JavaScript 之后没有啥 side project 就直接开始学 Angular 做项目。遇到最近很火的JavaScript30这个项目后决心好好实践一下 Vanilla JavaScript。

对于每个挑战，我会自己在看过视频了解原理后自己实现一遍并在 blog 里记录过程、想法和相关资料。源码放在我的 Github上，demo 通过 Github Pages 部署，点击这里或 Github 的 readme 中连接可以访问。

Objective

利用 Flexbox 实现一个 Gallery，点击一个 panel 后可放大，并飞入上下的文字。

demo

• Demo
• Source

Steps

1. 为包裹 5 个子 panel 的 div 添加 flex 相关的属性:

   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center; 
   

   并为每个子 panel 设置 flex-grow 为 1 使占满屏幕宽度.
2. 居中子 panel 的所有 p tag 内容

   display: flex;
   justify-content: center;
   align-items: center;
   

3. 将子 panel 上下文字移出：

   .panel p:first-child { transform: translateY(-100%) }
   .panel p:last-child { transform: translateY(100%) }
   

4. 准备点击后添加的类，设置点击 panel 的 flex 为 5，并设置 translateY(0) 移入上下文字。
5. JavaScript 部分添加对应的 EventListener。

Things learned

Flexbox

flex 已经成为目前 CSS layout 的必备了，1月份 Bootstrap v4-alpha6 也已经全面使用 flex 进行布局。

因为之前专门学过 flex，这里进行的还是很轻松，相关的知识点网上有很多资源讲解。

Center

panel 里面每个 p tag 内文字需要在各自的区域内居中，这里可以使用 flex 轻松解决。更多的解决方案可以参考css tricks。

fly-in fly-out

利用 transform: translateY(-100%) 将元素向上平移，添加 transitioned 事件的监听器可以移回。

注意原作者 Wes 这里有个 bug，当快速双击 panel 时文字会停留在 panel 内。解决方案有两个：

1. 对 tranform 的 transition 设置延时
2. 在 transitioned 事件监听器内使 opened class 的 toggle 依赖于 open class 的存在。
   我的代码中使用了方案2。