JavaScript30 Day 5(flex box)

这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解

第五天的挑战是点击任意一张图片，图片展开，上端和下端显示出文字，再次点击，图片缩回，字消失

day5效果图

CSS部分（由于做完这些，我对flexbox 还不是特别的熟练，明天准备做一做阮一峰大神的flexbox实例）如有不足，下次改进

本次挑战主要难点在css部分的flexBox部分
布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

• Flex Container(Parent)
  • display:flex 将其设置为弹性盒子
  • justify-content: center;沿主轴的的对齐方式为中部
  • flex-direction: column;排列方式为纵向
• Flex Item(children)
  flex属性是flex-grow(伸展值), flex-shrink(可接受的压缩值) 和 flex-basis（元素默认的尺寸值）的简写，默认值为0 1 auto。后两个属性可选。

  
  
  


  


  

    

      
Hey
      
Let's
      
Dance
    
    

      
Give
      
Take
      
Receive
    
    

      
Experience
      
It
      
Today
    
    

      
Give
      
All
      
You can
    
    

      
Life
      
In
      
Motion
    
  

JS 部分

• 获取所有类名为 panel 的元素
• 为其添加 click 事件监听，编写触发事件调用的函数
• --为其添加 transitionend 事件监听，编写调用的函数

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

    function toggleOpen() {
      console.log('Hello');
      this.classList.toggle('open');
    }

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

    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

这次js大部分内容都在以前的挑战中出现过，唯一出现的新知识点是toggle()，其为切换功能，也就是说如果存在这个类就移除，如果不存在就添加

---

以上就是我在day5中学到的知识，这里我同样参考了soyaine的中文指南，感谢