点击任意一张图片，图片展开，同时从图片上下两方分别移入文字。点击已经展开的图片后，图片被压缩，同时该图片上下两端的文字被挤走。
初始文档的 dom 结构：以 <code>.panels</code> 为父 <code>div</code> 之下，有 5 个类名为 <code>.panel</code> 的 <code>div</code>，这 5 个各含有 3 个子 <code>p</code> 标签。而相应的 css 样式中，动画时间等特性已经设定好，只需要完成不同状态下的页面布局以及事件监听即可。
css 在这个过程中占了重点，运用 <code>flex</code> 可以使各个元素按一定比例占据页面。在调试的时候，可以把边框显示出来方便查看效果。（<code>border: 1px solid #f00;</code>）
将 <code>.panels</code> 设置为 <code>display:flex</code>
设定每个子 <code>panel</code> 的 <code>flex</code> 值为 <code>1</code>
针对每个子 <code>panel</code>，设为 <code>display:flex</code>，设置其 flex 主轴方向
控制 <code>.panle</code> 的子元素 <code><p></code> 中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中）
设置为 <code>display:flex</code>
设置 <code>flex</code> 值
设置其子元素的布局方式：垂直水平居中（沿主轴、侧轴居中）
设定点击图片后文字移动的样式
设定点击图片展开后的图片的 <code>flex</code> 值
重要：不了解css和flex的童鞋必看。
<a href="http://www.css88.com/book/css/properties/flex/flex.htm">css参考手册</a>
<a href="http://www.ruanyifeng.com/blog/2009/03/css_selectors.html">css选择器笔记</a>
<a href="http://bbs.kongyixueyuan.com/topic/10/flex">flex布局完全入门教程</a>
<a href="http://www.webhek.com/post/html5-classlist-api.html">使用html5里的classlist操作css类</a>
获取所有类名为 <code>panel</code> 的元素
为其添加 <code>click</code> 事件监听，编写触发事件调用的函数（给触发的 dom 元素添加/去掉样式，实现拉伸/压缩的效果）
为其添加 <code>transitionend</code> 事件监听，编写调用的函数（添加/去掉样式，实现文字的飞入/飞出效果）
<a href="https://github.com/liyuechun/javascript30-liyuechun">github source code</a>
简介： 资深讲师，全栈工程师；区块链、高可用架构技术爱好者。
区块链技术交流qq群：348924182
「区块链部落」官方公众号
