前言
發現項目中的圖片占位模塊寫得很不優雅，找了一圈，發現沒找到自己想要的圖片組件。于是自己寫了一個，寫了一個還算優雅的圖片組件：mult-transition-image-view
截圖：
功能簡介
首先它是一個比較優雅的組件：用起來不頭疼。
第二個它能實現以下場景：
使用方法
安裝npm 包
npm install react-mult-transition-image-view
代碼部分
import ImageBoxView from 'react-mult-transition-image-view' <ImageBoxView img="#你的圖片#"/>
當然 你可以設置其他屬性
<ImageBoxView width="320" // height="200" // 寬高，會轉化成 style 屬性 mode="style" // 使用 style 去顯示圖片（默認:img） img="#你要的圖片#"/> // 圖片路徑
小圖過渡到大圖的效果
<ImageBoxView animate="fade" // 會觸發動畫樣式(見下方樣式部分 ) mode="style" // 使用 style 去顯示圖片（默認:img） img={['#小圖地址#', '#大圖地址#']}/> // img 傳入數組形式。實現隨機顯示圖片
當有很多圖片的時候，可以讓圖片隨機時間顯示，增加圖片顯示出來的體驗
（一起出來真的有點丑）
<ImageBoxView delay="100" // 延遲加載（默認：0），可以傳入一個隨機數 img="#你要的圖片#"/> // 圖片路徑
幻燈片效果
因為 img 屬性可以傳入數組，所以 理論上可以加載很多圖，實現幻燈片效果。
使用 wait 屬性 來設置，每張圖片加載后的等待時間
<ImageBoxView animate="fade" // 會觸發動畫樣式(見下方樣式部分 ) wait="100" // 每張圖片加載完后，繼續加載下一張的時間（默認：0） mode="style" // 使用 style 去顯示圖片（默認:img） img={['#圖片1#', '#圖片2#', '#圖片3#']}/> // img 傳入數組形式。樣式部分
別忘了樣式部分
.c-img-box{ display:inline-block; width: 320px; height: 200px; background: #f7f6f5; position: relative; .img-hold{ overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; img{ width:100%; height:100%; } &.img-animate{ transition: opacity 0.5s; } } .img-cover{ background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px; background-color:#f0f0f0; } .img-cover, .img-hold, .img-hide{ position: absolute; width: 100%; height: 100%; top:0; left:0; } .img-hide{ opacity: 0; } }TODO
github: https://github.com/qilei0529/react-mult-transition-image-view
本地下載：http://xiazai.VeVB.COm/201710/yuanma/react-mult-transition-image-view(VeVB.COm).rar
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
