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