JavaScript 5/30：Flex Panel Gallery即FLEX布局的图片库-CSDN博客

JavaScript30 为Wes Bos推出的一项为期30天的挑战，旨在帮助人们用纯JavaScript来实现效果，初学者若想在JS方面快速精进，不妨一试。本题为第五题。

实现效果

点击任意一张图片，图片放大X倍，同时图片上下两方飞入文字，再点击已经展开的图片后，图片被压缩，同时顶端和底部的文字飞出。查看我的代码和demo。

页面基础布局

观察文档初始布局：在类名为.panels的父元素div之下，有5个类名为.panel的子div，这5个div内均包含3个p标签。文档内也已提供CSS样式及动画，做题者只需稍许补充并添加监听事件即可。

  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    ......
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>
复制代码

解题思路

CSS部分：

在本章中，大量运用flex布局知识，如需补课，推荐查阅阮一峰大神的博客:

设置父元素也就是最大的容器.panels为display:flex，默认项目沿主轴方向，从左到右排列;
设置每个子元素即容器成员.panel为display:flex，并设置属性：
- 设置flex: 1,flex为flex-grow, flex-shrink和flex-basis的简写；
- 设置justify-content: center，该属性规定项目在主轴上的对齐方式，center即沿主轴居中排列。
- 设置flex-direction: column，该属性定义主轴的方向（即项目的排列方向），column表示主轴为垂直方向，起点在上沿；
- 设置align-items: center，即项目在交叉轴上居中对齐。
设置点击图片后，文字的移动样式；
设置点击图片后，图片的flex值。

JS部分：

获取所有类名为.panel的元素；
为其添加click监听事件，触发调用函数，添加或去除样式，实现图片拉伸或压缩的效果；
为其添加transitionend监听事件，触发调用函数，添加或去除样式，实现顶端及底部文字飞入或飞出效果。

CSS部分代码

    html {
      box-sizing: border-box;
      background: #ffc600;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }

    body {
      margin: 0;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    .panels {
      min-height: 100vh;
      overflow: hidden;/*内容溢出元素框时，内容会被修剪，并且其余内容不可见 */
      display: flex;
    }

    .panel {
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
      flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
      background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
      flex: 1;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }


    .panel1 {background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);}
     ......
    .panel5 {background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
    }

    /* Flex Items */

    .panel>* {
      margin: 0;
      width: 100%;
      transition: transform 0.5s;
      flex: 1 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .panel>*:first-child {
      transform: translateY(-100%);
    }
    .panel.open-active>*:first-child {
      transform: translateY(0);
    }
    .panel>*:last-child {
      transform: translateY(100%);
    }
    .panel.open-active>*:last-child {
      transform: translateY(0);
    }

    .panel p {
      text-transform: uppercase;
      font-family: 'Amatic SC', cursive;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
      font-size: 2em;
    }

    .panel p:nth-child(2) {
      font-size: 4em;
    }

    .panel.open {
      flex: 5;
      font-size: 40px;
    }
复制代码

JavaScript完整代码：

    const Panels = document.querySelectorAll('.panel');

    function clearOpen() {
      Panels.forEach(panel => panel.classList.remove('open'))
    }

    function toggelOpen() {
      this.classList.toggle('open');
    }

    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active')
      }
    }

    Panels.forEach(panel => panel.addEventListener('click', toggelOpen));
    Panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
复制代码