card.gif
逛蘑菇街的时候看到这个效果的轮播图，就尝试着用react写了个这种效果的组件，用工具录下来的gif图有点卡，看起来不够流畅。
动效主要运用css3的animation、keyframes
配置比较简单，只需要传：
data:数据源，仅支持[[{},{},{}],[{},{},{}],...[{},{},{}]]的格式
activeIndex: 默认初始化开始翻牌轮播的索引
duration: 隔多长时间进行一次翻牌轮播，数值型，单位是秒
transitionDuration: 每次翻牌的动画时长，数值型，单位是秒
做完以后发现一个大问题，图片加载有些迟缓，翻牌效果就会不流畅，因为我放了超高清大图，后来调整了图片大小，尽量压缩图片，效果就好一些了，不过初次在浏览器中打开，图片尚未缓存时，还是会有些不流畅，上网查了下图片优化方案：
压缩图片
实用矢量图代替位图
不同场景选择合适的图片格式
图片懒加载
图片预加载
根据我的业务场景，需要将图片做预加载处理，有点忙，以后再做优化。
[demo展示中心]：https://yomonah.github.io/project/app.html#/card-banner
[源码]：https://github.com/yomonah/react-demo/tree/master/src/components/card_banner
网友评论