【50projects50days第一天】
第一天是一个带动画的可扩展卡片。动画效果非常丝滑，技术主要体现在css上。从这个demo中我学到的第一个是flex，也就是弹性布局，靠这个布局可以十分灵活地分配卡片的大小。而要实现这个项目的动画效果下面这个我没用过的属性也很关键：`-webkit-transition: all 700ms ease-in;` 。点击卡片扩大缩小的逻辑其实也很简单：首先为每个panel添加一个点击的监听事件，然后定义一个css的类active，用来赋予当前扩展的卡片属性。当监听到点击事件时移除所有panel中的active类，并为当前所点的卡片加上active类即可。
第一天是一个带动画的可扩展卡片。动画效果非常丝滑，技术主要体现在css上。从这个demo中我学到的第一个是flex，也就是弹性布局，靠这个布局可以十分灵活地分配卡片的大小。而要实现这个项目的动画效果下面这个我没用过的属性也很关键：`-webkit-transition: all 700ms ease-in;` 。点击卡片扩大缩小的逻辑其实也很简单：首先为每个panel添加一个点击的监听事件，然后定义一个css的类active，用来赋予当前扩展的卡片属性。当监听到点击事件时移除所有panel中的active类，并为当前所点的卡片加上active类即可。
展开
评论
1
![[呲牙]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[惊喜]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)
![[流泪]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)