05JS实现弹性相册

05 Flex Panel Gallery打卡指南

作者：@sandystar

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 5 篇。完整代码已经放到github上了，欢迎访问！

实现效果

要实现一个这样的弹性相册。当鼠标点击相片时，相片变宽并且压缩其他图片，有文字浮入。再次点击图片时，图片会压缩，同时会挤走上下两端的文字。

思路

关于这类的动态效果，我们可以想想，其实动态效果都是使用css来实现的，而JavaScript就是使其css动态的改变。所以我们可以这样做：

1. 先定义好起始的css样式效果
2. 接着定义改变后的css样式效果
3. 然后使用JavaScript去动态添加或删除相应的css样式
4. 这期间想要做到顺滑的过渡要定义好 transition 属性

步骤

1. 定义初始的css样式

我们可以看到最初的相册是整体均分空间，并且当点击某一图片可以做到挤压其余图片扩展自己空间，这里可以想到使用flex布局来实现。

并且设置好过渡的 transition效果：

.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(</