card.gif
逛蘑菇街的時(shí)候看到這個(gè)效果的輪播圖，就嘗試著用react寫了個(gè)這種效果的組件，用工具錄下來(lái)的gif圖有點(diǎn)卡烹玉，看起來(lái)不夠流暢。
動(dòng)效主要運(yùn)用css3的animation阐滩、keyframes
配置比較簡(jiǎn)單二打，只需要傳：
data:數(shù)據(jù)源，僅支持[[{},{},{}],[{},{},{}],...[{},{},{}]]的格式
activeIndex: 默認(rèn)初始化開始翻牌輪播的索引
duration: 隔多長(zhǎng)時(shí)間進(jìn)行一次翻牌輪播掂榔，數(shù)值型继效，單位是秒
transitionDuration: 每次翻牌的動(dòng)畫時(shí)長(zhǎng)，數(shù)值型装获，單位是秒
做完以后發(fā)現(xiàn)一個(gè)大問題瑞信，圖片加載有些遲緩，翻牌效果就會(huì)不流暢穴豫，因?yàn)槲曳帕顺咔宕髨D凡简，后來(lái)調(diào)整了圖片大小逼友，盡量壓縮圖片，效果就好一些了秤涩，不過初次在瀏覽器中打開帜乞，圖片尚未緩存時(shí)，還是會(huì)有些不流暢筐眷，上網(wǎng)查了下圖片優(yōu)化方案：
壓縮圖片
實(shí)用矢量圖代替位圖
不同場(chǎng)景選擇合適的圖片格式
圖片懶加載
圖片預(yù)加載
根據(jù)我的業(yè)務(wù)場(chǎng)景黎烈，需要將圖片做預(yù)加載處理，有點(diǎn)忙匀谣，以后再做優(yōu)化怨喘。
[demo展示中心]：https://yomonah.github.io/project/app.html#/card-banner
[源碼]：https://github.com/yomonah/react-demo/tree/master/src/components/card_banner
