在加载图像占位符到图像时平滑过渡

Question

我在我的项目中使用swiper slider，我想知道如何从图像占位符平滑过渡，我会在加载时用真实图像替换它们。所以，就我而言，我制作了一个如下所示的滑块：

     <div class="swiper-slide">
        <a href="/player/{{ $player->id }}/{{ $player->fullName }}">
          <div class="mdc-card player-slider-card">
            <img data-src="https://placeimg.com/250/300/any" class="player-images"/>
            <div class="card-img-overlay">
              <section class="mdc-card__media">
                <i class="material-icons player-icon">person_outline</i>
                <h3 class="mdc-card__title mdc-card__title--large">{{ $player->first_name }} {{ $player->last_name }}</h3>
              </section>
              <div class="mdc-card__primary">
                <h4 class="mdc-card__subtitle">
                  {{ $player->nationality }}
                  @if($player->position != '')
                  | {{ $player->position }}
                  @endif
                </h4>
              </div>
            </div>
          </div>
        </a>
      </div>

我已经制作了带有img属性的data-src代码，我后来删除并添加了src属性，这些代码在加载图片时同时删除了图标{ {1}}我作为图片占位符。这是scss文件：

app.scss

person_outline

这是js文件：

app.js

$white: #fff;

@mixin pulse {
  -webkit-animation: pulse .65s infinite alternate;
  animation: pulse .65s infinite alternate;
}

@keyframes pulse {
  0%{opacity:.5}100%{opacity:1}
}
.slider-section {
  position: relative;

  .arrow-left, .arrow-right {
    position: absolute;
    top: 40%;
    z-index: 10;
  }
  .arrow-left {
    left: 5px;
  }
  .arrow-right {
    right: 5px;
  }

  .swiper-slide {
    a {
      text-decoration: none;
    }
  }

  .player-slider-card {
    background: #E1E9EE;
    color: $white;
    width: 250px;
    @include pulse;

    h3, h4 {
      @include pulse;
      color: $white;
    }

    img {
      opacity: 1;
      transition: opacity 0.3s;
    }

    img[data-src] {
      opacity: 0;
    }

    .mdc-card__media {
      height: 300px;
    }
    .player-icon {
      margin: auto;
      font-size: 78px;
      margin-bottom: 50px;
      margin-top: 50px;
    }
  }
}

我做了一个jsfiddle here。我想知道的是，如何在加载图像时进行平滑过渡。我想我可以通过一个简单的过渡来解决这个问题：

import Swiper from 'swiper';

const removePlaceholder = (item) => {
  setTimeout(() => {
    let slides       = document.querySelectorAll(`.${item}-slider-card`);
    let images       = document.querySelectorAll(`.${item}-images`);
    let placeholders = document.querySelectorAll(`.${item}-icon`);

    slides.forEach(el => {
      el.classList.remove(`${item}-slider-card`);
    });

    images.forEach(el => {
      el.setAttribute('src', el.getAttribute('data-src'));
      el.removeAttribute('data-src');
    })

    placeholders.forEach(el => {
      el.remove();
    })
  }, 3000);
}

const sliderOptions = (nextEl, prevEl) => {
  return {
    direction: 'horizontal',
    slidesPerView: 5,
    simulateTouch: false,
    spaceBetween: 1,
    navigation: {
      nextEl,
      prevEl,
    },
    on: {
      imagesReady:() => {
        removePlaceholder('player');
      },
    },
    breakpoints: {
        1181: {
            slidesPerView: 5
        },
        1180: {
            slidesPerView: 4
        },
        1020: {
            slidesPerView: 3
        },
        700: {
            slidesPerView: 2
        }
    }
  }
}

let videoOptions = sliderOptions('.js-arrow-videos-right', '.js-arrow-videos-left');
let playerOptions = sliderOptions('.js-arrow-players-right', '.js-arrow-players-left');
let swiperVideos = new Swiper('.js-videos-slider', videoOptions);
let swiperPlayers = new Swiper('.js-players-slider', playerOptions);

但是，这没有帮助，我怎样才能在medium网站或Facebook上实现与图像类似的效果。