JS30 Day 5 - Flex Panel Gallery学习笔记

这次的练习，也比较简单，但也有些需要注意的地方，大多都在css的控制

以下为原始码

https://github.com/87JoJo/05---Flex-Panel-Gallery

我们要的功能就是，当按下对应图片，首先会拓展图片，并将上下的字回归原位。再点一下，就变回来。

一开始长如下

最终结果如下

首先我们要利用flex将
整个图片转向，并将每个图片都分配同比例。

    .panel {      ...      display: flex;      /* 每张图佔一等份 */      flex: 1;      /* 改变其方向 */      flex-direction: column;      justify-content: center;      }

将字体置中

    .panel p {      ...      /* 文字置中 */      display: flex;      align-items: center;      justify-content: center;    }

而后，我们利用transform: translateY将上下的字体给隐藏起来。
注意，参数如使用%，是以元素本身大小作为计算基準，故要在panel下全部子元素下高度比例

    /* 所有panel下的第一个子元素 */    .panel>*:first-child {      transform: translateY(-100%);    }    .panel>*:last-child {      transform: translateY(100%);    }

   .panel>* {      margin: 0;      width: 100%;      /* for translateY*/      height: 100%;      transition: transform 0.5s;    }

再来设置，点击后会触发的样式，点击图片比例及字体会变大

    .panel.open {      font-size: 40px;      flex: 3;    }

点击后第一及最后的元素(字)会回原位

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

最后就是利用js控制，在js部分，要注意的地方就是transitionend，因为transitionend
(动画结束)，会依据属性数量做触发，而在此题目，我们会触发的事件总共有两个属性，
所以如果我们删除判断式，将会没有功能，因为等于open-active触发两次，他加上这个
class又给他删除，所以必须判断，是否有一个对应的事件触发。

  function transitionendHandler(e) {    console.log(e); // 获取属性(font-size,flex-grow)        // indexOf() 方法会回传给定元素于阵列中第一个值，若不存在于阵列中则回传 -1    // if (e.propertyName.indexOf('flex') !== -1) { //如果存在flex会回传-1    //   this.classList.toggle('open-active');    // }    if (e.propertyName === 'flex-grow') { //也可判断是否有名为flex-grow的事件      this.classList.toggle('open-active');    }  }