react实现一个优雅的图片占位模块组件详解

npm install react-mult-transition-image-view

 import ImageBoxView from 'react-mult-transition-image-view'

 

  // 图片路径

  // img 传入数组形式。

  // 图片路径

  // 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;
 }
 
}