Sikara

05 - 弹性照片墙

05 - 弹性照片墙

介绍

  • 点击各自图片区域图片和字体会有各自的开合动画效果
  • 项目链接

设计思路

  1. 采用flex布局方式处理图片的排列，文字的排列[flex 布局的基本概念]
  2. 了解图片的变换属性是flex（flex-grow）:这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于flex-direction值。
  3. 了解字体位置变换属性transform的translateY
  4. 确认监听事件是click------点击对应区域添加/删除变换样式来实现动画效果
    1. 第一种思路：通过element.className查看元素的class字符串，如果不含有动画样式就添加样式，反之删除，这样就呈现出图片文字的开合效果
    2. 第二种思路：基于第一种思路，这种开关机制采用toggle处理样式更方便

注意事项

  1. css的类名选择器 .class1.class2和.class1 .class2的区别

  2. css伪类选择器:first-child（第一个元素），:last-child（最后个元素），:nth-child（如:nth-child(2) 当前元素的兄弟元素里匹配第2个元素）

  3. css 符号：> 选取父元素的子元素 ， * 选取全部元素

  4. 图片动画与字体动画的延迟处理：单独添加一个transitionend监听事件，检测到图片动画执行完成，就执行字体动画

    function fontFlex2(event) {
      //获取动画完成的参数名字
      // console.log(event.propertyName);
      if (event.propertyName.includes('flex')){//监听图片部分动画结束输出名
        this.classList.toggle("openAnime");
      }
    }

Sikara

© 2025 Sikara