JavaScript 05 — Flex Panels

实现效果

点击任意一张图片，图片放大，随后图片上下两方飞入文字，再次点击已经展开的图片后，图片和文字恢复初始状态。

js实现步骤
1 先给图片实现拉伸（即点击放大）效果
给图片添加点击事件 写触发事件调用的函数 使触发后的图片实现放大效果

2 随后再实现文字飞入/飞出的效果
给图片添加transitionend事件 写触发事件调用的函数 使触发后的图片实现文字的飞入/飞出效果

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

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

function toggleActive(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))