Vue 渲染圖片閃爍

使用vue寫輪播，企圖直接改變 :syle 來更換圖片， 發現一個意外情況：

<div class="carousel-container">
      <div class="img-container" :style="imgStyle()"></div>
    </div>

.carousel-container .img-container {
  transform: scale(0.65, 0.65);
  transform-origin: 0 0;
  transition: background-image 1s ease;
}

imgSrcList: [
        {src: "/images/0.jpg", position: "0 0"},
        {src: "/images/00.jpg", position: "0 1025px"},
        {src: "/images/1.jpg", position: "0 0"},
        {src: "/images/11.jpg", position: "0 1025px"},
        {src: "/images/2.jpg", position: "0 0"},
        {src: "/images/22.jpg", position: "0 1025px"},
        {src: "/images/3.jpg", position: "0 0"},
        {src: "/images/33.jpg", position: "0 1025px"},
        {src: "/images/4.jpg", position: "0 0"},
        {src: "/images/44.jpg", position: "0 1025px"}
      ],

結果出現一個意外情況， 切換圖片時候，圖片閃爍。
感覺就像是：

1. 點擊切換圖片。
2. position 立即生效。
3. src 等動畫完成生效，在那之前背景是上一張圖片，但是是下一張的 position 屬性 QAQ

不使用CSS position 或者 不使用 transition 動畫，可以避免這個問題。
添加background-positiond 的動畫也可以， 不過不喜歡這個動畫效果。
目前沒別的解決方案。 如果有請大佬告訴我 QAQ