05 Flex Panel Gallery

效果

效果图

Demo
Github

知识点

• flex
• transition
• classList.toggle()

笔记

flex 简写

flex: <flex-grow> <flex-shrink> <flex-basis>

几种预定义值：

• flex: initial 相当于：flex: 0 1 auto
• flex: auto 相当于：flex: 1 1 auto
• flex: none 相当于：flex: 0 0 auto
• flex: <确定数值> 比如：flex: 1相当于：flex: 1 1 0

transitionend 事件

transitionend 事件会在 CSS transition 结束后触发

参考

这里监听了两个事件，一个是点击时拉伸图片，一个是等图片动画结束，再进行文字动画。

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

这里也可以通过设置css transition 的延迟时间来设置文字动画，使其晚于图片动画，这样就只需监听一个点击事件即可。不过个人喜欢 Wes Bos 的这种写法，这样写一目了然，一个回调函数负责修改一种 class，如果需要调整动画的一些细节，只需调整对应的函数或 clas 即可，而不会牵一发动全身。

参考资料

• Flexbox 完整指南
• CSS 弹性盒子布局
• w3schools
• Flexbox 参考
• Flex 兼容性