05 Flex Panel Gallery
2018-12-14 本文已影响0人
地平线0530
效果
效果图
知识点
flextransitionclassList.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 即可，而不会牵一发动全身。
